Populating the 2nd drop-down menu according to the 1st

[gradinumcp]

Hey! I have 2 drop-down menus. The first is called selList1 which displays the month. The 2nd drop-down menu is called destList which should display the days according to the month chosen. So if user selects January in the 1st drop-down menu then in the seconds it should display 1,2,3,4---upto 31. Similarly if user selects February in the 1st drop-down menu, then 2nd drop-down menu should show 1,2,3,4---28 and so on.

Heres my code I dont know what is incorrect...Any clues???

<form name="cascade">
<select name="selList1" size="1" onchange="fillSel(this)">
<option selected>-Select Month-</option>
<option value="selList2">January</option>
<option value="selList3">February</option>
<option value="selList4">March</option>
<option value="selList5">April</option>
<option value="selList6">May</option>
<option value="selList7">June</option>
<option value="selList8">July</option>
<option value="selList9">August</option>
<option value="selList10">September</option>
<option value="selList11">October</option>
<option value="selList12">November</option>
<option value="selList13">December</option>
</select>

<select name="destList" size="1" onchange="doSel(this)">
<option>-- Number of Days -- </option>
</select>
</form>

<script language="javascript">
<!--
selList2 = new Array("31");
selList3 = new Array("28");
selList4 = new Array("31");
selList5 = new Array("30");
selList6 = new Array("31");
selList7 = new Array("30");
selList8 = new Array("31");
selList9 = new Array("31");
selList10 = new Array("30");
selList11 = new Array("31");
selList12 = new Array("30");
selList13 = new Array("31");


function fillSel(selObj)
{
var i = j = 0;
var newItem;
var src;
var srcName = "";

for (i = 0; i < selObj.length; i++)
if (selObj.options.selected)
srcName = selObj.options.value;

src = eval(srcName);

with (document.cascade.destList)
{
options.length = 0;
for (i = 0; i < src.length; i++)
{

newItem = options.length;
options[newItem] = new Option(src);
options[newItem].value = src[i+1];
i++;
}
options[0].selected = true;
}
if (!isOk)
history.go(0);
}


function doSel(selObj)
{
for (i = 1; i < selObj.length; i++)
if (selObj.options.selected)
location.href = selObj.options.value;
}

//-->
</script>

 

[LFI]

Seems to work for me in IE6 (once I declare isOk somewhere). The only problem seems to arise when/if the user picks the '-Select Month-' option from the first list. There should be a way to make this javascript-failing-action fail gracefully.

What's not working for you?

--Dave

 

[gradinumcp]

Whats is isOK?

 

[LFI]

You have this in your code:

 if (!isOk)
     history.go(0);

...but nowhere in what you provided is isOk declared. I figured it was because you didn't include 100% of your code.

--Dave

 

[ThomasJSmart]

im working on a similer system but am having a problem with the second menu. on some (older) browsers the menu list is updated with the new entries but the height of the menu stays the same. This makes the second menu apear empty although if i select it and press the down arrow key it still scrolls through all the new options.. is there some kind of refresh function that needs to be called ?

I learned a bit yesterday, today i learned a lot, imagine what i'll learn tomorrow!