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属性必须是唯一的。使用相同的＆＃34;实例＆＃34; （如你所说）下拉数次表示你使用相同的Id。但是，如果您只是更改了自己的ID，那么您的jQuery将无法正常运行。

我建议您使用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();
  });
});

以下工作示例：

＆＃13;

$(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();
  });
});

＆＃13;

<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>

＆＃13;

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下拉列表的多个实例不能一起工作

2 个答案: