Question

我有一个下拉列表，需要显示与所选选项对应的隐藏div，并且在选择空白选项时不执行任何操作：

$("#hiddenDiv1").hide();
$("#hiddenDiv2").hide();

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

});

<select id="mySelector">
    <option>select one option</option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
</select>

<div id="hiddenDiv1">aaaaa</div>
<div id="hiddenDiv2">bbbbb</div>

就我自己而言，这是可以的。

Answer 1

非常简单。

<强>的Javascript

$('.hiddenDiv').hide();
function showHide(value){
    $('.hiddenDiv:visible').hide();
    $('#div_'+value).show();
}

<强> HTML

<select id="mySelector" onchange="showHide(this.value)">
    <option>select one option</option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
</select>

<div id="div_option1" class="hiddenDiv">aaaaa</a>
<div id="div_option2" class="hiddenDiv">bbbbb</a>

修改的

好吧，另外一种做js的方法是没有内联事件：

<强>的Javascript

$('#mySelector').change(function(){
    var value = $(this).val();
    $('.hiddenDiv:visible').hide();
    $('#div_'+value).show();
});

<强> HTML

<select id="mySelector">
    <option>select one option</option>
    <option value="option1">option 1
    <option value="option2">option 2
</select>

<div id="div_option1" class="hiddenDiv">aaaaa</a>
<div id="div_option2" class="hiddenDiv">bbbbb</a>

Answer 2

Emmanuel回答的另一种选择：

var $div1 = $('#hiddenDiv1'),
    $div2 = $('#hiddenDiv2'),
    $both = $div1.add($div2);

$('#mySelector').change(function() {
    var $this = $(this),
        val = $this.val();

    switch (val)
    {
        case 'option1':
            $div1.show();
            $div2.hide();
            break;

        case 'option2':
            $div1.hide();
            $div2.show();
            break;

        default:
            $both.hide();
    }
});

修改

由于似乎有一些想要把它变成一些高尔夫代码，这是我的减线计数版本（没有改变OP的标记）：

var $hiddenDivs = $('div[id^=hiddenDiv]').hide();
$('#mySelector').change(function() {
    $hiddenDivs.hide().filter('[id$=' + $(this).val().substring(6) + ']').show();
});

jsfiddle demo →

Answer 3

如果您的场景允许您使用选项值命名DIV的编号，则：

<强> HTML：

<select id="mySelector">
   <option>select one option</option>
   <option value="option1">option 1</option>
   <option value="option2">option 2</option>
</select>

<div id="content_option1">aaaaa</div>
<div id="content_option2">bbbbb</div>

<强>使用Javascript：

$("div[id^='content']").hide();
$("#mySelector").change(function () {
    $("div[id^='content']").hide();
    $("#content_" + $(this).val()).show();
});

除了没有额外的课程外，它与@ Emmanuel的解决方案类似。

使用jQuery在select上显示适当的div

3 个答案:

修改