Jquery Dynamically Selected DropDown field

Trying to work this logic out but I'm stuck. I have two dropdown menus. First one is "Number of Rooms" the 2nd one is "Number of Guests". Depending on how many rooms one selects will determine the minimum and maximum number of guest are allowed per room. Each room allows a minimum of 1person and a max of 4 persons. So if I selected 4 Rooms my min guest would be 4 and max would 16.

The logic for the drop downs is:
1 Room: 1, 2, 3 OR 4 Guests
2 Rooms: 2, 3, 4, 5, 6, 7, or 8 Guests
3 Rooms: 3, 4, 5, 6, 7, 8, 9, 10, 11 or 12 Guests
4 Rooms: 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 or 16 Guests

Now how do I make the minimum number of guests the default selected state?
So if the user selects 3 rooms then I would like to make 3 Guests the default selected state even though the max could be 12.

I'm thinking:
 $('select option:nth(0)').attr("selected", "selected");
or
var myDDL = $('#solutionId');
myDDL[0].selectedIndex = 0;
but I couldn't get them to work.

My Code:
<script type='text/javascript'>//<![CDATA[ 
$(window).load(function(){
var combinations = {
    "1": ["1","2","3","4"],
	"2": ["2","3","4","5","6","7","8"],
	"3": ["3","4","5","6","7","8","9","10","11","12"],
	"4": ["4","5","6","7","8","9","10","11","12","13","14","15","16"]
}


$('#num_rooms').change(function(){
    var template = '<option>Choose Guests</option>';  // will hold html for second drop down.

    solutions = combinations[$(this).val()];
	
	
   $.each(solutions, function(i, solution){
        template += '<option value="' + solution + '">' + solution + ' Guests</option>'
    });
	
	$('#solutionId').html(template);
});

$('#solutionId').change(function(){
    yourtext = $(this).val();  // change yourtext to whatever you like.
   
});
});//]]>  
 

<form action="somepage.asp" method="get"> 

<select id="num_rooms" name="Rooms">
    <option value="1">1 Room</option>
    <option value="2">2 Rooms</option>
    <option value="3">3 Rooms</option>
    <option value="4">4 Rooms</option>
</select>

<select id="solutionId" name="Guests">
    <option value="1">1 Guest</option>
    <option value="2" selected="">2 Guests</option>
    <option value="3">3 Guests</option>
   <option value="4">4 Guests</option>
</select>

<input type="submit">
</form>

Open in new window

swaggerkingAsked:
Who is Participating?
 
Chris StanyonConnect With a Mentor Commented:
Have a look at this fiddle:

http://jsfiddle.net/ChrisStanyon/wxp8H/

When you change the Rooms, it will rebuild the Guest dropdown with the correct minimum and maximum number of guests :)
0
 
GaryCommented:
http://jsfiddle.net/GaryC123/ELE5q/

$("#num_rooms").change(function(){
  $("#solutionId").val(this.value)
})


(315 points - how do you come up with that?)
0
 
swaggerkingAuthor Commented:
Nice and clean. Worked out of the box.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.