Quote:
|
Originally Posted by creed
hey all
I've got two drop down menus that i want to change based on the month selected in the first drop down to show only the days that actually exist in teh secodn drop down.
...
thanks in advance
|
Try this. Tested in IE6 and Firefox 1.0.
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<script type="text/javascript">
var daysArray = new Array(
31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);
function makeDayOptions()
{
// I'm ignoring old browsers, sorry. They'll have to choose the old-fashioned way.
if (! document.getElementById) return;
// make day select depending on value of month: remove it and re-create it
var f = document.getElementById("f1");
if (document.getElementById("day"))
f.removeChild(document.getElementById("day"));
// get the value of the month select
var val = f.elements["month"].options[f.elements["month"].selectedIndex].value;
// make day select element
var s2 = document.createElement("select");
s2.setAttribute("name","day");
s2.setAttribute("id","day");
f.appendChild(s2);
// fill in day select element
var L = daysArray[val];
var i;
var o;
for (i=1; i<=L; i++)
{
o = document.createElement("option");
o.setAttribute("name","o"+i);
o.setAttribute("id","o"+i);
o.setAttribute("value",i);
o.appendChild(document.createTextNode(i));
s2.appendChild(o);
}
}
</script>
</head>
<body>
<form name="f1" id="f1" action="" method="post">
<select name="month" id="month" onChange="makeDayOptions()">
<option value='0' selected>January</option>
<option value='1'>February</option>
<option value='2'>March</option>
<option value='3'>April</option>
<option value='4'>May</option>
<option value='5'>June</option>
<option value='6'>July</option>
<option value='7'>August</option>
<option value='8'>September</option>
<option value='9'>October</option>
<option value='10'>November</option>
<option value='11'>December</option>
</select>
<select name="day" id="day">
<option value='1' selected>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>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>
</form>
</body>
</html>