0

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?

3 Answers 3

2

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();
5
  • Hi @Jon if i write your code then my dropdownlist also hides. i dont want that. I want the drop down list to be excluded. :)
    – coderslay
    Mar 14, 2012 at 9:07
  • Yep, using siblings() selects more than just the divs you want to hide.
    – jchavannes
    Mar 14, 2012 at 9:09
  • @Jon your second approach isn't working yet. But your first approach is working :). Maybe because you are excluding a class after hiding the sibling divs...
    – coderslay
    Mar 14, 2012 at 9:18
  • @Coder_sLaY: Works fine for me. Perhaps your HTML is not exactly what you posted here? I 'm excluding first and then hiding...
    – Jon
    Mar 14, 2012 at 9:22
  • @Jon I have given you the exact code what i am using. Although maybe i am using jquery mobile so it is not working.Cant say...
    – coderslay
    Mar 14, 2012 at 9:29
1

Well, just as a matter of cleaning up your code:

$('#one, #two, #three, #four, #five').hide();
$('#'+$(this).val()).show();

Edit: Try this then:

​$('#tab-1 ​​​div').each(function() {
    if($(this).attr('id').length != -1) {
        $(this).hide();
    }
});​​​
$('#'+$(this).val()).show();
1
  • Nope this is also good.But i wanted less hardcoded values. More efficient...Although your Answer is better then my approach so +1 :)
    – coderslay
    Mar 14, 2012 at 9:17
0

You can simplify your code adding a div

<div data-role="content">
    <div id="tab-1">
        <br />
        <div id="selection">       
            <div id="one" style="width: device-width; height: 50px;">A</div>
            <div id="two" style="display:none; width: device-width; height:50px;">B</div>
            <div id="three" style="display:none; width: device-width; height: 50px;">C</div>
            <div id="four" style="display:none; width: device-width; height: 50px;">D</div>
            <div id="five" style="display:none; width: device-width; height: 50px;">E</div>
        </div>
        <div class="ui-select">
            <select name="usageDropDownList" id="usageDropDownList">
                <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>
</div>

then your code will be

$(document).ready(function() {
    $("#usageDropDownList").change(function() {
        var selected = $(this).val();
        $("#selection > div:visible").hide();
        $("#"+selected).show();
    });
});

You can try this code here : http://jsfiddle.net/cRbUS/8/

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.