CODEWITHSUNDEEP
javascriptjqueryforms
Jordan Andrews
Jordan Andrews

Reputation: 163

Multiple dependent select boxes not working

I'm looking to make a series of select boxes in html which show different options depending on what has already been selected. I can get the first two to work but can't work out why it's not injecting into the last box here, the #FCadultseats select box.

I basically want the FCadultseats box to be available only when the movie is in the big cinema (at 9pm).

Thanks a lot for any and all help. I've been trying for ages and dont know why this wont work.

Here's my code:

<form id = "booking" method = "POST" action = "testserver">
                    Day: 
                    <select id = "dayselector" name = "day">
                        <option disabled selected> -- Select a Day -- </option> 
                        <option value= "Monday">Monday </option>
                        <option value = "Tuesday">Tuesday</option>
                        <option value = "Wednesday">Wednesday</option>
                        <option value = "Thursday">Thursday</option>
                        <option value = "Friday">Friday</option>
                        <option value = "Saturday">Saturday</option>
                        <option value = "Sunday">Sunday</option>
                    </select>   
                    <br>
                    Time and Cinema: 
                    <select id ="timeselector" name ="time">
                        <option disabled selected> -- Select a Time -- </option>
                    </select> 
                    First Class Adults: <select id ="FCadultseats">
                        <option disabled selected> -- Not Available -- </option>
                    </select>
</form>



$(document).ready(function(){
$("#dayselector").change(function(){
    var sel_day = $('option:selected').val();
    if (sel_day == "Saturday" || sel_day == "Sunday"){
        $("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option><option value ="4">4pm - Small Cinema</option>'); 
    } else {    
        $("select#timeselector").html('<option disabled selected> -- Select a Time -- </option><option value ="9">9pm - Large Cinema</option>');
    }
});             

$("#timeselector").change(function(){
    var sel_time = $('option:selected').val();
    if (sel_time == 9){
    $("#FCadultseats").html('<option value ="0">0</option><option value ="1"></option><option value ="2">2</option><option value ="3">3</option><option value ="4">4</option><option value ="5">5</option><option value ="6">6</option><option value ="7">7</option><option value ="8">8</option><option value ="9">9</option><option value ="10">10</option><option value ="11">11</option><option value ="12">12</option>');
    }
});

});

Upvotes: 0

Views: 125

Answers (1)

Stryner
Stryner

Reputation: 7328

Try changing

var sel_day = $('option:selected').val();

to

var sel_day = this.value;

and do that in both places.

$('option:selected') selects ALL the selected options on the page, for every select.

Upvotes: 1

Related Questions