show/hide 基于具有动态生成 ID 的下拉列表的 div

Question

我正在尝试建立一种机制，让我在一个页面上有多个 select 下拉菜单，然后是根据活动 selection 显示或隐藏的 div。这些下拉菜单和 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>

有了这个，只有第一个下拉菜单按预期工作：select选择一个选项将显示该选项并隐藏其他选项。另一个下拉菜单不起作用 - 它不会显示选项 4 或 5。它也不会隐藏选项 1-3，因此此下拉菜单根本不起作用。

我真正想要实现的行为是每个下拉菜单 show/hides 只有作为选项给出的 div。我应该能够根据数据库为每个下拉菜单提供一个唯一的 ID，所以你会得到类似的东西；

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

那么我的问题是如何定制 jquery 以便它可以读取和处理唯一值。我不能将唯一的 id 值硬编码到脚本中（就像我对 dropDown 所做的那样），因为它们是从数据库中动态提取的。有没有办法重写 jquery 以将所需的行为应用于页面上的任何下拉菜单或其他方式？

Answer 1

将 select 的 id 改为 class。 id 在 DOM 中应该始终是唯一的。但是class可以应用于多个元素

DEMO

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

然后您的相同代码就可以工作了！

更新

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

<div class="group"> <!--group each select and subsequent divs into a container-->
    <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"> <!--Same here for 2nd dropdown-->
    <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>

JS 你可以在 change 事件中更新一行：

jQuery(".dropDown").change(function () {
       jQuery(this).closest('.group').find(".drop-down-show-hide").hide(); 
       //find select's parent and hide its corresponding divs only
       jQuery("#" + this.value).show();
});

DEMO

show/hide 基于具有动态生成 ID 的下拉列表的 div

show/hide divs based on drop-downs with dynamically generated id

html

css

jquery

show-hide

drop-down-menu