CODEWITHSUNDEEP
jquery
santa
santa

Reputation: 12512

Show appropriate div on select with jQuery

I have a drop-down and need to show hidden div that corresponds to the selected option and do nothing when a blank option is selected:

$("#hiddenDiv1").hide();
$("#hiddenDiv2").hide();

$('#mySelector').change(function() {

});


<select id="mySelector">
    <option>select one option</option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
</select>

<div id="hiddenDiv1">aaaaa</div>
<div id="hiddenDiv2">bbbbb</div>

That's as far as I was able to get on my own.

Upvotes: 0

Views: 217

Answers (3)

Matt Ball
Matt Ball

Reputation: 359776

An alternative to Emmanuel's answer:

var $div1 = $('#hiddenDiv1'),
    $div2 = $('#hiddenDiv2'),
    $both = $div1.add($div2);

$('#mySelector').change(function() {
    var $this = $(this),
        val = $this.val();

    switch (val)
    {
        case 'option1':
            $div1.show();
            $div2.hide();
            break;

        case 'option2':
            $div1.hide();
            $div2.show();
            break;

        default:
            $both.hide();
    }
});

Edit

Since there seems to be some desire to turn this into a bit of code golf, here's my reduced-line-count version (no changes to the OP's markup):

var $hiddenDivs = $('div[id^=hiddenDiv]').hide();
$('#mySelector').change(function() {
    $hiddenDivs.hide().filter('[id$=' + $(this).val().substring(6) + ']').show();
});

jsfiddle demo →

Upvotes: 1

Nik Kalyani
Nik Kalyani

Reputation: 916

If your scenario allows you to name the DIV's consist with the option values, then:

HTML:

<select id="mySelector">
   <option>select one option</option>
   <option value="option1">option 1</option>
   <option value="option2">option 2</option>
</select>

<div id="content_option1">aaaaa</div>
<div id="content_option2">bbbbb</div>

Javascript:

$("div[id^='content']").hide();
$("#mySelector").change(function () {
    $("div[id^='content']").hide();
    $("#content_" + $(this).val()).show();
});

It's similar to @Emmanuel's solution except without the additional class.

Upvotes: 1

Emmanuel
Emmanuel

Reputation: 5395

Quite simple.

Javascript

$('.hiddenDiv').hide();
function showHide(value){
    $('.hiddenDiv:visible').hide();
    $('#div_'+value).show();
}

HTML

<select id="mySelector" onchange="showHide(this.value)">
    <option>select one option</option>
    <option value="option1">option 1</option>
    <option value="option2">option 2</option>
</select>

<div id="div_option1" class="hiddenDiv">aaaaa</a>
<div id="div_option2" class="hiddenDiv">bbbbb</a>

Edit

Okay, so another way to do the js, without the inline event is this:

Javascript

$('#mySelector').change(function(){
    var value = $(this).val();
    $('.hiddenDiv:visible').hide();
    $('#div_'+value).show();
});

HTML

<select id="mySelector">
    <option>select one option</option>
    <option value="option1">option 1
    <option value="option2">option 2
</select>

<div id="div_option1" class="hiddenDiv">aaaaa</a>
<div id="div_option2" class="hiddenDiv">bbbbb</a>

Upvotes: 1

Related Questions