Show/Hide multiple DIVs with Select using jQuery

问题

I essentially have the same situation as the person in the following question:

Link: how to show/hide divs by select.(jquery)

Through extensive searching within Google I was able to come up with several different methods in which people claim their method works. I have yet to get any to work correctly yet. I don't yet know enough about jQuery to fully understand how to write this from scratch, thus I rely on really good examples for now.

What I've been trying to work with (based on examples I've found and tried) is this:

<script type="text/javascript">
    (document).ready(function() {
        ('.box').hide();<br/>
        ('#dropdown').change(function() {
        ('#divarea1')[ ($(this).val() == 'area1') ? 'hide' : 'show' ]()
        ('#divarea2')[ ($(this).val() == 'area2') ? 'hide' : 'show' ]()
        ('#divarea3')[ ($(this).val() == 'area3') ? 'hide' : 'show' ]()
        });
    });
</script>
<form>
    <select id="dropdown" name="dropdown">
        <option value="0">Choose</option>
        <option value="area1">DIV Area 1</option>
        <option value="area2">DIV Area 2</option>
        <option value="area3">DIV Area 3</option>
    </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

• Note: I am using brackets rather than the less-than and greater-than signs around html to display correctly in this message.

What I get when I test this:

• On first load with nothing selected => No DIV is display.
• When I select DIV Area 1 => DIV Area 2 and 3 are displayed.
• When I select DIV Area 2 => DIV Area 1 and 3 are displayed.
• When I select DIV Area 3 => DIV Area 1 and 2 are displayed.

My brain is fried for the day. What can I do to fix this?

回答1:

I'd do this:

<script type="text/javascript">
$(document).ready(function(){
 $('.box').hide();
  $('#dropdown').change(function() {
    $('.box').hide();
    $('#div' + $(this).val()).show();
 });
});
</script>
<form>
 <select id="dropdown" name="dropdown">
  <option value="0">Choose</option>
  <option value="area1">DIV Area 1</option>
  <option value="area2">DIV Area 2</option>
  <option value="area3">DIV Area 3</option>
 </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>

回答2:

@fudgey has given a nice solution. but have little doubt. It will depend on value and need to change Attribute ID of <div> every time.

So I'd do this `

    $(document).ready(function() {
        $('.box').hide();
        $('#dropdown').change(function() {      
            var selectedIdx = (0 == $(this).attr("selectedIndex"))? '' :                 $(this).attr("selectedIndex");
            if("" != selectedIdx){
                $('#divarea'+ selectedIdx ).hide().siblings().show();
            } else {
                $('.box').hide();
            }        
        });
    });
</script>
<form>
    <select id="dropdown" name="dropdown">
        <option value="0">Choose</option>
        <option value="area1">DIV Area 1</option>
        <option value="area2">DIV Area 2</option>
        <option value="area3">DIV Area 3</option>
    </select>
</form>
<div id="divarea1" class="box">DIV Area 1</div>
<div id="divarea2" class="box">DIV Area 2</div>
<div id="divarea3" class="box">DIV Area 3</div>
</html>`

回答3:

Swap show/hide so that it looks like this:

$('#divarea1')[ ($(this).val() == 'area1') ? 'show' : 'hide' ]()

回答4:

This code is a little more succinct:

$(document).ready
(
  function()
  {
    $("div.box").hide();
    $("#dropdown").change
    (
      function()
      {
        var selectedValue = $(this).val();
        if(selectedValue !== "0")
        {
          $("div.box").show();
          $("#div" + selectedValue).hide();
        }   
      }   
    );
  }
};

Essentially, if there is a value selected (i.e., the option is not set to "Choose"), then all div.box elements are shown. The DIV matching the selected option is then hidden. This should happen quickly enough so that the flash is not noticeable.

来源：https://stackoverflow.com/questions/1413042/show-hide-multiple-divs-with-select-using-jquery