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

I'm trying to set up a mechanism where I have multiple select dropdowns on a page, followed by divs by that are shown or hidden based on the active selection. These dropdowns and divs, and their values, are dynamically pulled from on a database.

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

Currently, I'm using the following jquery script.

目前,我正在使用以下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();
    });
  });

And the following html code;

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

With this, only the first dropdown works as desired: selecting one of the choices will show that choice and hide the others. The other dropdown doesn't function - it won't show choices 4 or 5. It also doesn't hide choices 1-3, so this dropdown isn't working at all.

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

The behavior that I'd actually like to achieve is where each dropdown show/hides only the divs that are given as options. I should be able to give each dropdown a unique id based on the database, so you'd have something like;

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

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

My question, then, is how to tailor the jquery so that it can read and process the unique values. I can't hard code the unique id values into the script (like I did with dropDown") because they are pulled on the fly from a database. Is there a way to rewrite the jquery to apply the desired behavior to any dropdown on the page, or an alternative means?

那么,我的问题是如何定制jquery以便它可以读取和处理唯一值。我无法将唯一的id值硬编码到脚本中(就像我使用dropDown一样),因为它们是从数据库中动态提取的。有没有办法重写jquery以将所需的行为应用到任何下拉列表中页面,或替代手段?

1 个解决方案

#1

Change id of select to class instead. id should always be unique in DOM. But class can be applied to multiple elements

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

DEMO

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

and then your same code works!

然后你的相同代码工作!

---

UPDATE

To achieve your current requirement I suggest you to group your dropdowns as below:

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

<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 you can update a single line in change event:

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