Question

我正在使用下拉列表根据所选选项显示/隐藏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();

});

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

});

使用下拉菜单显示/隐藏div

4 个答案: