场景是 用户从dropDown列表中选择一个条目。参考相关的条目,我将为现有的webpath创建一个新的前缀,但我的问题是,它不会被解释为链接部分,所以链接不会被生成!如果用户从dropDown-list中选择link1,结果应该是:https:/link1/webssobwostrfer.com。用例:如果用户从dropDown-list中选择link1,结果应该是:https:/link1/webssobwostrfer.jsp(作为链接和文本显示)。
你能帮我怎么才能达到这个目的吗?
非常感谢您的帮助! :)
JS:
function output (choice) {
var index = choice.selectedIndex;
var prefix = "";
if(index == 1)
prefix = "https://link1";
else if (index == 2)
prefix = "https://link2;
else if (index == 3)
prefix = "https://link3";
else if (index == 4)
prefix = "https://link4";
else if (index == 5)
prefix = ""https://link5";
document.getElementById("url").innerHTML = praefix;
}
HTML。
<body>
<form>
<p>
<select id = "list" name = "list" onchange ='output(this.form.liste);' >
<option></option>
<option>link1</option>
<option>link2</option>
<option>link3</option>
<option>link4</option>
<option>link5</option>
</select>
</p>
</form>
<a href=<span id = "url"></span>/web/sso/bw/ostrfer.jsp> <span id = "url"></span> /web/sso/bw/ostrfer.jsp</a>
</body>
请看这个演示。http:/jsfiddle.netJFqrH3
HTML:
<form>
<p>
<select id = "list" name = "list" onchange ='output(this);' >
<option></option>
<option>link1</option>
<option>link2</option>
<option>link3</option>
<option>link4</option>
<option>link5</option>
</select>
</p>
<a id="url" href="/web/sso/bw/ostrfer.jsp">/web/sso/bw/ostrfer.jsp</a>
<a id="url1" href="/web/sso/bw/ostrfer.jsp">/web/sso/bw/ostrfer1.jsp</a>
<a id="url2" href="/web/sso/bw/ostrfer.jsp">/web/sso/bw/ostrfer2.jsp</a>
</form>
JS:
function output (choice) {
var index = choice.selectedIndex;
var prefix = "";
if(index == 1)
prefix = "https://link1";
else if (index == 2)
prefix = "https://link2";
else if (index == 3)
prefix = "https://link3";
else if (index == 4)
prefix = "https://link4";
else if (index == 5)
prefix = "https://link5";
updateLink(document.getElementById("url"), prefix);
updateLink(document.getElementById("url1"), prefix);
updateLink(document.getElementById("url2"), prefix);
}
function updateLink(url, prefix) {
if(!url.getAttribute("postfix")) {// need to save orignal href as it will be replaced later
url.setAttribute("postfix", url.getAttribute("href"));
}
var postfix = url.getAttribute("postfix");
url.innerHTML = prefix + postfix;
url.href = prefix + postfix;
}
你的代码中存在多个语法错误。加上 a href=<span id = "url"></span>
是无稽之谈。它不能工作。相反,你应该使用属性(见 getAttributesetAttribute). 另外,使用swithc语句比使用ifelse要简单得多。还有一点。onchange=output(this.form.liste);
- 你可以用swithc语句来代替 onchange=output(this);
因为这已经指向了你的下拉元素。
问题很不清楚,这样做有用吗?
document.getElementById("url").innerHTML = prefix + document.getElementById("url").innerHTML;
你可以把这段代码存储为一个常量。
/web/sso/bw/ostrfer.jsp
作为一个常量,像这样
var uri = "/web/sso/bw/ostrfer.jsp";
然后当用户选择链接时,你可以像这样附加它。
var elem = document.getElementById("url");
elem.setAttribute('href', prefix + uri);
这样就可以用新的网址更新锚标签的 "href "属性。
我设置了一个测试示例,这样你就可以看到它的实际操作了。小提琴. 如果你用浏览器的开发工具检查这个链接,你可以看到,执行代码后,href(原来是一个空字符串"")现在已经更新为 "https:/link1webssobwostrfer.jsp"。
希望能帮到你。
你有多个语法错误导致的问题。
首先
prefix = "https://link2;
^ missing close quote here
第二次
prefix = ""https://link5";
^ remove the extra quote here
第三次
document.getElementById("url").innerHTML = praefix;
^ should be prefix
第四次
<select id = "list" name = "list" onchange ='output(this.form.liste);' >
^ should be list or just 'this'
即使有语法错误,你的代码还是不对--有了一个 <span>
之内 href
的 <a>
.
试试这个jsFiddle演示 - 我改变了代码的工作方式,它没有使用span。
完整的固定代码。
<script>
function output () {
var index = this.selectedIndex;
var prefix = "";
var suffix = "/web/sso/bw/ostrfer.jsp";
prefix = "https://" + this.value;
var link = document.getElementById("url");
link.href = prefix + suffix;
link.innerHTML = prefix + suffix;
}
window.onload = function()
{
document.getElementById("list").onchange = output;
}
</script>
<form>
<p>
<select id = "list" name = "list" >
<option></option>
<option>link1</option>
<option>link2</option>
<option>link3</option>
<option>link4</option>
<option>link5</option>
</select>
</p>
</form>