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

Answer 1

Swap show/hide so that it looks like this:

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

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

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>