jquery - 使用下拉显示/隐藏 div

Question

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

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

http://jsfiddle.net/infatti/fj63g/7/

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

});

Answer 1

试试这个 ：

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

});

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

Answer 2

$('.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/

Answer 3

如何将每组 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();

});

Answer 4

使用下拉特定类组：

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

});