Question

我试图设置一种机制，我在页面上有多个选择下拉列表，然后根据活动选择显示或隐藏divs。这些下拉列表和div以及它们的值是从数据库中动态提取的。

目前，我正在使用以下jquery脚本。

jQuery(document).ready(function () {

    jQuery(".drop-down-show-hide").hide();

    jQuery("#dropDown").change(function () {
       jQuery(".drop-down-show-hide").hide(); 
       jQuery("#" + this.value).show();
    });
  });

以下html代码;

<select id="dropDown">
<option>Select...</option>
<option value="choice-1">Choice 1</option>
<option value="choice-2">Choice 2</option>
<option value="choice-3">Choice 3</option>
</select>
<div id="choice-1" class="drop-down-show-hide">content</div>
<div id="choice-2" class="drop-down-show-hide">content</div>
<div id="choice-3" class="drop-down-show-hide">content</div>

<select id="dropDown">
<option>Select...</option>
<option value="choice-4">Choice 4</option>
<option value="choice-5">Choice 5</option>
</select>
<div id="choice-4" class="drop-down-show-hide">content</div>
<div id="choice-5" class="drop-down-show-hide">content</div>

有了这个，只有第一个下拉列表可以正常工作：选择其中一个选项将显示该选项并隐藏其他选项。另一个下拉列表不起作用 - 它不会显示选项4或5.它也不会隐藏选项1-3，所以这个下拉列表根本不起作用。

我实际想要实现的行为是每个下拉列表显示/隐藏仅作为选项提供的div。我应该能够根据数据库给每个下拉列表一个唯一的ID，所以你有类似的东西;

<select id="uniquevalue1">
<select id="uniquevalue2">

然后，我的问题是如何定制jquery以便它可以读取和处理唯一值。我无法将唯一的id值硬编码到脚本中（就像我使用dropDown＆＃34;）因为它们是从数据库中即时提取的。有没有办法重写jquery以将所需的行为应用于页面上的任何下拉列表，还是替代方法？

Answer 1

将id的{{1}}改为课程。 select中的id应始终是唯一的。但DOM可以应用于多个元素

<强> DEMO

class

然后您的相同代码有效！

<强>更新

为了达到您当前的要求，我建议您将下拉列表分组如下：

<select class="dropDown">
      ...
</select>
<select class="dropDown">
     ....
</select>

JS 您可以在<div class="group">  <select class="dropDown"> <option>Select...</option> <option value="choice-1">Choice 1</option> <option value="choice-2">Choice 2</option> <option value="choice-3">Choice 3</option> </select> <div id="choice-1" class="drop-down-show-hide">content1</div> <div id="choice-2" class="drop-down-show-hide">content2</div> <div id="choice-3" class="drop-down-show-hide">content3</div> </div> <div class="group">  <select class="dropDown"> <option>Select...</option> <option value="choice-4">Choice 4</option> <option value="choice-5">Choice 5</option> </select> <div id="choice-4" class="drop-down-show-hide">content4</div> <div id="choice-5" class="drop-down-show-hide">content5</div> </div>事件中更新一行：

change

<强> DEMO

使用动态生成的ID显示/隐藏基于下拉列表的div

1 个答案: