Question

方案是：用户从dropDown列表中选择一个条目。参考相关条目，我将为现有的webpath创建一个新的前缀。但是我有问题，不会将其解释为链接部分，因此链接不会生成！使用案例：如果用户从dropDown-list中选择link1，结果应为：https：//link1//web/sso/bw/ostrfer.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>

Answer 1

您有多个导致问题的语法错误：

第一

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>的{{1}}内href并不好。

Try this jsFiddle Demo - 我改变了代码的工作方式，但没有使用跨度。

完整的固定代码：

<a>

Answer 2

这个问题很不清楚，这有用吗？

document.getElementById("url").innerHTML = prefix + document.getElementById("url").innerHTML;

Answer 3

查看此演示： http://jsfiddle.net/JFqrH/3/

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>是不存在的。它不能工作。而不应该使用属性（请参阅getAttribute / setAttribute）。此外，使用swithc语句而不是if / else更简单。另一件事：onchange=output(this.form.liste); - 而不是这个你可以使用onchange=output(this);，因为这已经指向你的下拉元素。

Answer 4

您可以存储此代码段：

/web/sso/bw/ostrfer.jsp

像这样的常数：

var uri = "/web/sso/bw/ostrfer.jsp";

然后，当用户选择链接时，您可以像这样添加它：

var elem = document.getElementById("url");
elem.setAttribute('href', prefix + uri);

这应该使用新网址更新锚标记的“href”属性。

我设置了一个测试示例，以便您可以在此Fiddle中查看它。如果您使用浏览器开发人员工具检查链接，您可以看到在执行代码后，href（最初为空字符串“”）现已更新为“https：//link1/web/sso/bw/ostrfer.jsp ”

希望这有帮助。

将span id文本转换为链接并显示为文本

4 个答案: