Issues switching drop down menus

creed · 11-29-2004, 02:24 PM

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.

Unfortueantly it'll jsut populatte the largest array and thats' that.

Tried havign it so the array is cleared after the array is populated and printed to the screen, but to no avail

here's the code:

Code:

function populate(m,d) {

    d.options.length = 0;

	if (m.selectedIndex == 0) {
	d.options[0] = new Option("Select All");
	}
	
    if (m.selectedIndex == 1 || 3 || 5 || 7 || 8 || 10 || 12) {
    d.options[0] = new Option("1","1");
    d.options[1] = new Option("2","2");
    d.options[2] = new Option("3","3");
	---snip snip ----
    d.options[28] = new Option("29","29");
    d.options[29] = new Option("30","30");
	d.options[30] = new Option("31","31");
    }

    if (m.selectedIndex == 2) {
    d.options[0] = new Option("1","1");
    d.options[1] = new Option("2","2");
    d.options[2] = new Option("3","3");
		---snip snip ----
	d.options[27] = new Option("28","28");
    d.options[28] = new Option("29","29");
    }

    if (m.selectedIndex == 4 || 6 || 9 || 11) {
    d.options[0] = new Option("1","1");
    d.options[1] = new Option("2","2");
    d.options[2] = new Option("3","3");
		---snip snip ----
    d.options[26] = new Option("27","27");
	d.options[27] = new Option("28","28");
    d.options[28] = new Option("29","29");
    d.options[29] = new Option("30","30");
	}

    if (document.layers) {history.go(0);}

    }

    function changepg() {
    if (document.search.day.value) {
       location = document.search.day.value;
       }
    }

    // -->
</head>
<body>
<form action="search.asp" name="search" id="search" method="POST">
<select name="month" onchange="populate(document.search.month, document.search.day);">
    <option value='%'>Select All</option>
    <option value='1'>January</option>
    <option value='2'>Febuary</option>
    <option value='3'>March</option>
    <option value='4'>April</option>
	<option value='5'>May</option>
    <option value='6'>June</option>
    <option value='7'>July</option>
    <option value='8'>August</option>
    <option value='9'>September</option>
	<option value='10'>October</option>
    <option value='11'>November</option>
	<option value='12'>December</option>
</select>
<select name="day" id="day">
<option></option>
</select>
<input type="button" value="Go!" onclick="changepg()" />
</form>
</body>
</html>

thanks in advance

kaeli69 · 11-30-2004, 07:38 AM

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>

creed · 11-30-2004, 08:15 AM

sweet! that's exactly what I was missing. thanks a bunch :d