Solved

Jquery Dynamically Selected DropDown field

Posted on 2014-01-24
3
908 Views
Last Modified: 2014-01-24
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

0
Comment
Question by:swaggerking
3 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39807009
http://jsfiddle.net/GaryC123/ELE5q/

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


(315 points - how do you come up with that?)
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 315 total points
ID: 39807354
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
 

Author Closing Comment

by:swaggerking
ID: 39807445
Nice and clean. Worked out of the box.
0

Featured Post

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
In this fifth video of the Xpdf series, we discuss and demonstrate the PDFdetach utility, which is able to list and, more importantly, extract attachments that are embedded in PDF files. It does this via a command line interface, making it suitable …

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question