0

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

4 に答える 4

4

これを試して、

ライブデモ

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

        $('div').hide();
            div.show();

    });
});​

編集

現在、javascript はすべての div を非表示にしますが、参加する div にクラスを割り当てて $('div').hide(); を置き換えると、これを防ぐことができます。$('.somecssClass').hide(); を使用したステートメント

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

<div id="melbourneBranch" class="somecssClass" style="display:none">
    CONTENT
</div>
于 2012-06-28T04:37:31.017 に答える
1

コンテンツ要素を再び非表示にする場合は、コンテンツ要素に共通のクラスを追加します

デモ：http：//jsfiddle.net/q8G2N/

HTML：

   <div id="sydneyBranch" class="content" style="display:none">

JS：

$(function(){ /* shorthand $(document).ready(){*/

    $('#contact-location').change(function(){
        var location = $(this).val();
        /* don't do anything if blank option selected*/
         if( location !=''){
             $('.content').hide();
             $('#'+location).show();
         }

    });

})
于 2012-06-28T04:43:24.057 に答える
1

これを試して 

<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();
        });
    });
于 2012-06-28T04:49:20.810 に答える
0

これはあなたが探しているものです：

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;
    });
});​
于 2012-06-28T04:44:31.583 に答える