使用下拉显示/隐藏 div答案

【问题标题】：Use drop down to show/hide div使用下拉显示/隐藏 div
【发布时间】：2013-01-23 11:39:28
【问题描述】：

我正在使用下拉菜单根据所选选项显示/隐藏 div。显示/隐藏正在工作，但是我只需要隐藏与每个下拉菜单相关的 div，而不是每次都隐藏页面上的所有 div。

如何仅选择与每个下拉菜单相关的 div？

<select id="dropDown">
    <option>Choose</option>
    <option value="div1">Show Div 1</option>
    <option value="div2">Show Div 2</option>
</select>

<div  id="div1" class="drop-down-show-hide">div 1</div>
<div  id="div2" class="drop-down-show-hide">div 2</div>

<hr />

<select id="dropDown2">
    <option>Choose</option>
    <option value="div3">Show Div 3</option>
    <option value="div4">Show Div 4</option>
</select>

<div  id="div3" class="drop-down-show-hide">div 3</div>
<div  id="div4" class="drop-down-show-hide">div 4</div>


$('.drop-down-show-hide').hide();

$('#dropDown').change(function(){

    $('.drop-down-show-hide').hide();
    $('#' + this.value).show();

});

$('#dropDown2').change(function(){

    $('.drop-down-show-hide').hide();
    $('#' + this.value).show();

});

【问题讨论】：

标签： jquery

【解决方案1】：

使用下拉特定的类组：

<div  id="div1" class="dd_group1">div 1</div>
<div  id="div2" class="dd_group1">div 2</div>

<div  id="div3" class="dd_group1">div 3</div>
<div  id="div4" class="dd_group1">div 4</div>

$('#dropDown').change(function(){

    $('.dd_group1').hide();
    $('#' + this.value).show();

});

$('#dropDown2').change(function(){

    $('.dd_group2').hide();
    $('#' + this.value).show();

});

【讨论】：

【解决方案2】：

如何将每组 div 的类更改为唯一？喜欢：

<select id="dropDown">
    <option>Choose</option>
    <option value="div1">Show Div 1</option>
    <option value="div2">Show Div 2</option>
</select>

<div  id="div1" class="drop-down-show-hide">div 1</div>
<div  id="div2" class="drop-down-show-hide">div 2</div>

<hr />

<select id="dropDown2">
    <option>Choose</option>
    <option value="div3">Show Div 3</option>
    <option value="div4">Show Div 4</option>
</select>

<div  id="div3" class="drop-down-show-hide2">div 3</div>
<div  id="div4" class="drop-down-show-hide2">div 4</div>


$('.drop-down-show-hide').hide();

$('#dropDown').change(function(){

    $('.drop-down-show-hide').hide();
    $('#' + this.value).show();

});

$('#dropDown2').change(function(){

    $('.drop-down-show-hide2').hide();
    $('#' + this.value).show();

});

【讨论】：

【解决方案3】：

$('.drop-down-show-hide').hide();

$('#dropDown, #dropDown2').change(function(){

    $(this).find('option').each(function(){
        $('#'+$(this).val()).hide();
    });

    $('#' + this.value).show();

});

http://jsfiddle.net/3aRxW/1/

【讨论】：

【解决方案4】：

试试这个：

$('#dropDown').change(function(){
   $(this).find("option").each(function(){
      $('#' + this.value).hide();
    });
    $('#' + this.value).show();

});

演示：http://jsfiddle.net/fj63g/8/

【讨论】：

和#dropDown可以改成类
很好，使用类而不是 ID 使其更便携！