javascript - 在 Javascript 中更新多个 id

Question

我使用 <SPAN ID="idName"> 更新页面中的一些文本基于下拉选择 ID，但只有第一个元素 ID 发生变化。使用不同的 ID 可以工作，但希望有一个更简单的解决方案。我使用 twitter-bootstrap-3 作为我的下拉菜单。

这是 HTML:

<ul class="nav nav-pills">
 <li class="dropdown menu-btn">
  <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
      <span class="glyphicon glyphicon-map-marker"></span> <span id="SelectName"></span><b     class="caret"></b></a>
  <ul id="myCitylist" class="dropdown-menu">
        <li> <a href="#">San Jose</a> </li>
        <li> <a href="#">Silicon Valley</a> </li>
        <li> <a href="#">New York City</a> </li>
        <li> <a href="#">Paris</a> </li>
        <li> <a href="#">Silicon Valley</a> </li>
        <li> <a href="#">Tokyo</a> </li>
  </ul>
</li>
</ul>

Now we'll talk about <span id="SelectName"></span>

和 JavaScript

 document.getElementById("SelectName").innerHTML = "San Francisco";

 $('#myCitylist li').on('click', function(){
    document.getElementById("SelectName").innerHTML = $(this).text();

 });

 document.getElementById("SelectName").innerHTML = "San Francisco";

代码如下:http://jsfiddle.net/ub1g7fw6/

Answer 1

id 只能在页面上使用一次。您可以通过使用 class 来实现此目的:

HTML

<ul class="nav nav-pills">
   <li class="dropdown menu-btn">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" >
         <span class="glyphicon glyphicon-map-marker"></span> 
         <span class="update">San Francisco</span><b class="caret"></b>
      </a>
      <ul id="myCitylist" class="dropdown-menu">
        <li> <a href="#">San Jose</a> </li>
        <li> <a href="#">Silicon Valley</a> </li>
        <li> <a href="#">New York City</a> </li>
        <li> <a href="#">Paris</a> </li>
        <li> <a href="#">Silicon Valley</a> </li>
        <li> <a href="#">Tokyo</a> </li>
      </ul>
  </li>
</ul>

<div>Now we'll talk about <span class="update">San Francisco</span></div>

JS

$('.dropdown-menu').on('click', "li", function(){
  var optionChosen = $(this).text();
  $(this).closest("ul.nav.nav-pills").find("span.update").text(optionChosen).end().next().find("span.update").text(optionChosen);  
 });

FIDDLE