Question

I have a drop down list and 5 divs along with it.I need to show one particular div at one time and hide the other.This is my approach
This is my code

<div data-role="content">
    <div id="tab-1">
        <br />
        <div id="one" style="width: device-width; height: 150px;"></div>
        <div id="two" style="width: device-width; height: 150px;"></div>
        <div id="three" style="width: device-width; height: 150px;"></div>
        <div id="four" style="width: device-width; height: 150px;"></div>
        <div id="five" style="width: device-width; height: 150px;"></div>
        <div class="ui-select">
            <select name="usageDropDownList" id="usageDropDownList"
                data-native-menu="false" tabindex="-1">
                <option value="one">1</option>
                <option value="two">2</option>
                <option value="three">3</option>
                <option value="four">4</option>
                <option value="five">5</option>
            </select>
</div</div>

And here is my document.ready()

$(document).ready(function() {
    $("#usageDropDownList").change(function() {
        if ($(this).val() == 'one') {               
            $("#two").hide();
            $("#three").hide();
            $("#four").hide();
            $("#five").hide();              
            $("#one").show();
        } else if ($(this).val() == 'two') {
            $("#one").hide();
            $("#three").hide();
            $("#four").hide();
            $("#five").hide();              
            $("#two").show();
        } else if ($(this).val() == 'three') {
            $("#one").hide();
            $("#two").hide();
            $("#four").hide();
            $("#five").hide();              
            $("#three").show();
        } else if ($(this).val() == 'four') {
            $("#one").hide();
            $("#two").hide();
            $("#three").hide();
            $("#five").hide();              
            $("#four").show();
        } else if ($(this).val() == 'five') {
            $("#one").hide();
            $("#two").hide();
            $("#three").hide();
            $("#four").hide();              
            $("#five").show();
        }
    });
});

Can any one suggest me a better approach?

Answer 1

This is all you need:

$("#" + $(this).val()).show().siblings().hide();

A breakdown:

$("#" + $(this).val())  // selects div with id equal to value of selected option
.show()                 // shows it
.siblings()             // then selects all of the other divs next to it
.hide()                 // and hides them

Update:

Since there is also the <div class="ui-select"> next to the “number” divs in your markup, that will also be hidden (which is undesirable). You can fix this in many ways, here are two:

1: Make that div not be a sibling by simply placing a wrapper div around the “numbers”:

<div> <!-- added this -->
  <div id="one" style="width: device-width; height: 150px;"></div>
  <div id="two" style="width: device-width; height: 150px;"></div>
  <div id="three" style="width: device-width; height: 150px;"></div>
  <div id="four" style="width: device-width; height: 150px;"></div>
  <div id="five" style="width: device-width; height: 150px;"></div>
</div>

2: Exclude the ui-select div specifically:

$("#" + $(this).val()).show().siblings().not(".ui-select").hide();