使用jQuery从下拉列表中选择选项时显示/隐藏特定DIV

我正在尝试设置一个select下拉列表，使用jQuery，每个选项都将显示一个特定的DIV。我的大部分功能都在工作，我只是无法在选择另一个选项后隐藏显示的DIV。这是我目前的代码：

<select id="contact-location">
    <option value="">-- Select Location --</option>
    <option value="sydneyBranch">Sydney</option>
    <option value="melbourneBranch">Melbourne</option>
</select>

<div id="sydneyBranch" style="display:none">
    CONTENT
</div>

<div id="melbourneBranch" style="display:none">
    CONTENT
</div>


$(document).ready(function() {
    $('#contact-location').change(function(){
        var location = $(this).val(),
        div = $('#' + location);

        if($(this).val(location)) {
            div.show();
        } else {
            div.hide();
        }
    });
});

试试这个

编辑

目前javascript将隐藏所有div，如果我们为参与的div分配一些类并替换$'div'。hide；语句，其中包含$'.somecsclass'.hide

<div id="sydneyBranch" class="somecssClass" style="display:none">
    CONTENT
</div>

<div id="melbourneBranch" class="somecssClass" style="display:none">
    CONTENT
</div>

试试这个

编辑

目前javascript将隐藏所有div，如果我们为参与的div分配一些类并替换$'div'。hide；语句，其中包含$'.somecsclass'.hide

<div id="sydneyBranch" class="somecssClass" style="display:none">
    CONTENT
</div>

<div id="melbourneBranch" class="somecssClass" style="display:none">
    CONTENT
</div>

---

如果希望再次隐藏内容元素，请向其添加公共类

演示：

HTML:

---

如果希望再次隐藏内容元素，请向其添加公共类

演示：

HTML:

---

这就是你想要的：

var currentShowing = undefined;

$(document).ready(function() {
    $('#contact-location').change(function(){
        var location = $(this).val(),
        div = $('#' + location);

        div.show();
        $(currentShowing).hide();
        currentShowing = div;

        if(currentShowing === undefined)
            div = currentShowing;
    });
});​

---

这就是你想要的：

var currentShowing = undefined;

$(document).ready(function() {
    $('#contact-location').change(function(){
        var location = $(this).val(),
        div = $('#' + location);

        div.show();
        $(currentShowing).hide();
        currentShowing = div;

        if(currentShowing === undefined)
            div = currentShowing;
    });
});​

试试这个

<select>
        <option data-div-id="div1">Option 1</option>
        <option data-div-id="div2">Option 2</option>
        <option data-div-id="div3">Option 3</option>
    </select>

    <div id="div1" class="container"  style="display:none">1</div>
    <div id="div2" class="container"  style="display:none">2</div>
    <div id="div3" class="container"  style="display:none">3</div>

    $(document).ready( function() { 
        $("select").change(function(){
            var divId = $(this).find(":selected").attr("data-div-id");
            $(".container").hide();
            $("#" + divId).show();
        });
    });

试试这个

<select>
        <option data-div-id="div1">Option 1</option>
        <option data-div-id="div2">Option 2</option>
        <option data-div-id="div3">Option 3</option>
    </select>

    <div id="div1" class="container"  style="display:none">1</div>
    <div id="div2" class="container"  style="display:none">2</div>
    <div id="div3" class="container"  style="display:none">3</div>

    $(document).ready( function() { 
        $("select").change(function(){
            var divId = $(this).find(":selected").attr("data-div-id");
            $(".container").hide();
            $("#" + divId).show();
        });
    });

---

$'div'.hide将隐藏页面上的每个div谢谢@charlietfl，更新了我的答案效果很好，只需向相关div添加一个类，这样.hide方法就只针对它们。谢谢你！谢谢你div.hide将隐藏页面上的每个div谢谢@charlietfl，更新了我的回答，效果很好，只需向相关div添加一个类，这样.hide方法就只针对它们。谢谢你！