View Full Version : Changing the second drop down according to the first one

08-08-2008, 09:48 AM
Hi All,

I am a newbie in Javascript. I have the following drop down menus. First one is showing the dates. Second one is the number of days.

I want to find a Javascript code which changes the number of days according to the selected date.

For example: On the date of 26-08-2008 I want the "racnumberofdays" select menu show the options of 1-2-3-4 days. But if the client changes it to 27-08-2008, I need the script change the "racnumberofdays" select to the options of 1-2-3 only. I need this script not specific for this number of days or dates. Because they come from database.

So basicly on change of "racstartDate" for each day from the first date of the options, I want the racnumberofdays decrease one day.

I hope I could explain what I need.

Please help


<table width="500" border="0" align="center" cellpadding="0" cellspacing="0" id="table1">
<td width="113"><span class="stil2">Start Date :</span></td>
<td width="387"><select name="racstartDate" class="stil2">

<option value="8/26/2008">26-08-2008</option>

<option value="8/27/2008">27-08-2008</option>

<option value="8/28/2008">28-08-2008</option>

<option value="8/29/2008">29-08-2008</option>

</select> </td>
<td><span class="stil2">Number of Days :</span></td>
<select name="racnumberofdays" class="stil2">

<option value="1">1</option>

<option value="2">2</option>

<option value="3">3</option>

<option value="4">4</option>

</select> </td>
<td><span class="stil2">Vehicle Type :</span></td>

<select name="vehicletype" size="1" class="stil2">
<option>Choose Vehicle Type</option>

<option value="luxuryvan">Luxury Van</option>

<option value="carclass1">Car (Class 1)</option>

<option value="carclass1">Car (Class 1)</option>

<option value="carclass2">Car (Class 2)</option>

<option value="peoplecarrier">People Carrier</option>


<td><input name="B1" type="submit" class="stil2" value="Add Rent A Car" />

08-08-2008, 12:02 PM
There is 2 ways the Easy way loads of lists stored and load the correct
or an AJAX way where you get this list from a DB

Easy Way do this for each list chaning 1 to next number

var i = 0;
var output1;
function genList(listID, SpanID, ListName)
var list =new array();
var val =new array();

// This is list1
list[0] = new array();
val[0] = new array();

list[0][0] = 'Text to show ';
val[0][0] = 'value of text';

list[0][1] = 'Next Text';
list[0][1] = 'next value';

// this is list 2
list[1] = new array();
val[1] = new array();

list[1][0] = 'Text to show ';
val[1][0] = 'value of text';

list[1][1] = 'Next Text';
list[1][1] = 'next value';

output = '<select name="'+ListName+'" size="1" class="stil2">';

while (i != list1.count())
output = output+'<option value="'++val[listID][i]'">'+list[listID][i]+'</option>';
output = output+'</select>';

document.getElementById(SpanID).innerHTML = output;

I bilive this is correct if some one can varify for me i have a fealing the Arrays bit is wrong but not sure just google javascript arrays i think i am calling them wrong

Then have your second list in a div or span with the id Select2 and This on you first list box onSelect="genList(this.value);" and just number your values in you first list values to the list number in the javascript for the second list

And the Hard way learn how to use AJAX and then have fun lol

I have updated it a bit to allow you to use on multipule lists so you can chaneg the ID of the span or DIV arround you list so you can put it into the javascript call so onSelect="genList(*list number*,*output ID*, *List Name*);"

08-10-2008, 04:29 PM
can i just ask did this work for you as i was not sure if my code was completly correct