Jquery 下拉列表的多个实例不能一起工作

Question

我在另一个线程中找到了以下代码来创建一个 Jquery 下拉菜单：

$(document).ready(function() {

   $('.statecontent').hide();
   $('#' + $('#myselector').val()).show();
   $('#myselector').change(function(){
      $('.statecontent').hide();
      $('#' + $(this).val()).show();    
   });
});

HTML 看起来像这样

<select id="myselector">
   <option value="state1">State 1</option>
   <option value="state2">State 2 </option>
   <option value="state3">State 3</option>
</select>

<div id="state1" class="statecontent">State1 Specific Page Content Goes here</div>
<div id="state2" class="statecontent">State2 Specific Page Content Goes here</div>
<div id="state3" class="statecontent">State3 Specific Page Content Goes here</div>

这工作得很好，除了一个问题：当我在同一个页面上使用下拉菜单的多个实例时，它只正确运行第一个下拉菜单，其他下拉菜单的内容没有显示，只有下拉框是显示。我实际上想在同一页面上使用 3 个下拉菜单。有人知道代码有什么问题吗？在此先感谢您的帮助。

Answer 1

Id 属性必须是唯一的。多次使用下拉列表的相同 "instance"（如您所说）建议您使用相同的 ID。但是，如果您只是更改您的 ID，您的 jQuery 将不再像当前写入的那样运行。

我建议您改用 class 作为下拉菜单的选择器。此外，如果您希望它们位于不同的内容区域，可以为数据属性中的那些存储一个 class 选择器，或者将其包装在一个新的 div:

<select id="myselector1" class="myselector" data-class="statecontent1">
<select id="myselector2" class="myselector" data-class="statecontent2">
<select id="myselector3" class="myselector" data-class="statecontent3">

然后将 jQuery 更改为如下内容：

$(document).ready(function() {
  $('.myselector').each(function(i, elem) {
    $('.' + $(this).data('class')).hide();
    $('#' + $(this).val()).show();
  });
  $('.myselector').change(function() {
    $('.' + $(this).data('class')).hide();
    $('#' + $(this).val()).show();
  });
});

下面的工作示例：

$(document).ready(function() {
  //$('.statecontent1').hide();
  $('.myselector').each(function(i, elem) {
    $('.' + $(this).data('class')).hide();
    $('#' + $(this).val()).show();
  });
  $('.myselector').change(function() {
    $('.' + $(this).data('class')).hide();
    $('#' + $(this).val()).show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="myselector1" class="myselector" data-class="statecontent1">
  <option value="state1">State 1</option>
  <option value="state2">State 2</option>
  <option value="state3">State 3</option>
</select>
<div id="state1" class="statecontent1">State1 Specific Page Content Goes here</div>
<div id="state2" class="statecontent1">State2 Specific Page Content Goes here</div>
<div id="state3" class="statecontent1">State3 Specific Page Content Goes here</div>
<br/>
<br/>

<select id="myselector2" class="myselector" data-class="statecontent2">
  <option value="state4">State 4</option>
  <option value="state5">State 5</option>
  <option value="state6">State 6</option>
</select>
<div id="state4" class="statecontent2">State4 Specific Page Content Goes here</div>
<div id="state5" class="statecontent2">State5 Specific Page Content Goes here</div>
<div id="state6" class="statecontent2">State6 Specific Page Content Goes here</div>
<br/>
<br/>

<select id="myselector3" class="myselector" data-class="statecontent3">
  <option value="state7">State 7</option>
  <option value="state8">State 8</option>
  <option value="state9">State 9</option>
</select>
<div id="state7" class="statecontent3">State7 Specific Page Content Goes here</div>
<div id="state8" class="statecontent3">State8 Specific Page Content Goes here</div>
<div id="state9" class="statecontent3">State9 Specific Page Content Goes here</div>

Answer 2

将每个包裹在 div 中，这样您就可以轻松遍历 jquery 个模块：

$('.statecontent').hide();
$('.myselector').parent().find('#' + $('.myselector').val()).show();
$('.myselector').change(function() {
  $(this).parent().find('.statecontent').hide();
  $(this).parent().find('#' + $(this).val()).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="myselector">
    <option value="state1">State 1</option>
    <option value="state2">State 2</option>
    <option value="state3">State 3</option>
  </select>
  <div id="state1" class="statecontent">State1 Specific Page Content Goes here</div>
  <div id="state2" class="statecontent">State2 Specific Page Content Goes here</div>
  <div id="state3" class="statecontent">State3 Specific Page Content Goes here</div>
</div>
<br>
<div>
  <select class="myselector">
    <option value="state1">State 1</option>
    <option value="state2">State 2</option>
    <option value="state3">State 3</option>
  </select>
  <div id="state1" class="statecontent">State1 Specific Page Content Goes here</div>
  <div id="state2" class="statecontent">State2 Specific Page Content Goes here</div>
  <div id="state3" class="statecontent">State3 Specific Page Content Goes here</div>
</div>

Jquery 下拉列表的多个实例不能一起工作

Multiple instances of Jquery dropdown not working together

html

jquery

drop-down-menu