使用jQuery從下拉列表中選擇選項時顯示/隱藏特定的DIV

我試圖設置一個選擇下拉列表，使用jQuery時，每個選項都將顯示特定的DIV。我有大部分功能工作，一旦選擇了其他選項，我就無法讓顯示的DIV隱藏。這是到目前爲止我的代碼：使用jQuery從下拉列表中選擇選項時顯示/隱藏特定的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(); 
     } 
    }); 
});

來源

2012-06-28 SinDesign

試試這個，

Live Demo

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

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

    }); 
});

編輯

目前的JavaScript將隱藏所有的div，我們可以防止如果我們將一些類分配給參與的div並替換$（'div'），那麼這就是。聲明與$（'。somecssClass'）。hide（）;

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

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

來源

2012-06-28 04:37:31 Adil

'$（ '格'）隱藏（）'會隱藏頁面上的每個格 – charlietfl

感謝@charlietfl，更新我的答案 – Adil

很好的工作，只需要添加一個類到相關的DIV中，以便.hide（）方法只針對它們。感謝堆！ – SinDesign

添加一個普通類的內容元素，如果你希望他們再次隱藏

DEMO：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-28 04:43:24 charlietfl

另一個偉大的解決方案，謝謝！ – SinDesign

這是你在尋找什麼。

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-28 04:44:31 eddyuk

試試這個

<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-28 04:49:20 HADEV

使用jQuery從下拉列表中選擇選項時顯示/隱藏特定的DIV

回答

相關問題