Show/Hide multiple DIVs with Select using jQuery

Question

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 wit

Answer 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>

Answer 2

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.

Answer 3

Swap show/hide so that it looks like this:

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

Answer 4

@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>`