将span id文本转换为链接,并以文本形式显示

问题描述 投票:-2回答:5

场景是 用户从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>
javascript html jsp
5个回答
0
投票

请看这个演示。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); 因为这已经指向了你的下拉元素。


0
投票

问题很不清楚,这样做有用吗?

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

0
投票

你可以把这段代码存储为一个常量。

/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"。

希望能帮到你。


0
投票

你有多个语法错误导致的问题。

首先

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>
© www.soinside.com 2019 - 2024. All rights reserved.