CODEWITHSUNDEEP
jquery
Ghatzi
Ghatzi

Reputation: 597

Show/Hide div depending on dropdown select

I am trying to show a div using jQuery depending on what is selected from the drop down list. For example, if a user selects 'Airplane' from the list, i'd like the hidden div to appear(#number_of_tickets_1). If the user selects car, a different div will appear. Hope this is clear. example of my code below.

<script>
$(document).ready(function() {
   $('#number_of_tickets_1').hide();
   $('#travel_method_1').change(function() {
            alert($('#travel_method_1 option:selected').text());
            $('#number_of_tickets_1').show();
    });
});
</script>

The code above hides the div and shows it when some one clicks on the dropdown list. I've added an alert in there too. However I would like to show a specific div for each dropdown option selected. Something like in Javascript:

if(TRAVELMETHOD1.value == 'Airplane')
{
    NUMBEROFTICKETS1.style.display = 'block';
}       
else
{
    NUMBEROFTICKETS1.style.display = 'none';
}

Hope this makes sense. thanks in advance for any help.

Upvotes: 0

Views: 357

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

You can use a change handler, with .toggle() like

$(document).ready(function () {
    $('#number_of_tickets_1').hide();
    $('#travel_method_1').change(function () {
        alert($('#travel_method_1 option:selected').text());
        $('#number_of_tickets_1').toggle(this.value == 'Airplane');
    });
});

Upvotes: 0

Juan
Juan

Reputation: 5050

you can add an attribute to the Option where you have the ID or selector pointing to the section you want to show. Something like this:

$('#travel_method_1').change(function () {
    var selected = $('#travel_method_1 option:selected').data("relation-id");

    //Hide all other sections
    $(".sections").hide();

    if (selected) {
        $("#" + selected).show();
    }
});

html

<select id="travel_method_1">
    <option>Select one</option>
    <option data-relation-id="car">Car</option>
    <option data-relation-id="airplane">Airplane</option>
</select>
<div id="car" class="sections">car</div>
<div id="airplane" class="sections">airplane</div>

CSS

.sections {
    display: none;
}

Demo

Upvotes: 1

Related Questions