Select tag javascript (dependent dropdownlist)

JavaScript
1

I have to create two dropdownlists that are dependent

In my first select tag there are 4 selections , year,quarter,month and week.
and in second select it should automatically populate…If user select year from first select in second select values should be 1 to 365… if quarter values in second select(dropdown) should be 1 to 4. if month 1 to 12 and if week is selected 1 to 7… can anyone help me to achieve this… I will post that code and please help me to resolve this error as iam naive user to javascript…

          <select id="user_defn_uom" name="user_defn_uom" onchange="alert(this.options[this.selectedIndex].text)" align="center">

          <option selected value="">
          <option value="Yearly">Yearly
          <option value="Quarterly">Quarterly
          <option value="Monthly">Monthly
          <option value="Weekly">Weekly
       </td>







          <td>.
          <select name="user_defn_day" align="center">
          <option selected value="">

<script type=“text/javascript”>

alert(this.options[this.selectedIndex].text)

for (var i = 1; i <=366; i++)
{
document.write(‘<option value="’ + i + ‘">’ + i + ‘</option>’);

}

</script>
</select>

2

Hi. Below is a working example that does what you are asking. Be sure you have the ID attribute specified in each of your select tags so that the elements will be found in JavaScript. You can also clean this up a bit if you want. What I did was write a function that takes the value selected. I then call a function that determines the correct ending number and then clears and populates the select box with the correct range. If you have specific questions let me know. Enjoy!

<html>
<head>
	
	<script type="text/javascript">
		
		function UpdateRange(v)
		{
			switch(v)
			{
				case "Yearly":
				end = 366;
				break;
				
				case "Quarterly":
				end = 4;
				break;
				
				case "Monthly":
				end = 12;
				break;
				
				case "Weekly":
				end = 52;
				break;
			}
			alert("end = " + end);
			
			//clear all options from list
			document.getElementById('user_defn_day').options.length = 0;		
                        //add default (blank) option
			var optn = document.createElement("OPTION");
			optn.text = '';
			optn.value = '';
			
                     document.getElementById('user_defn_day').options.add(optn)						

                        //loop through and add range numbers
			for (var i=1; i<=end; i++)
			{
				var optn = document.createElement("OPTION");
				optn.text = i;
				optn.value = i;
				document.getElementById('user_defn_day').options.add(optn)				
			}
		}
	</script>
	
</head>
<body>

<form name="frmMain">

Period:	
<select id="user_defn_uom" name="user_defn_uom" onchange="UpdateRange(this.value);" align="center">
<option selected value=""></option>
<option value="Yearly">Yearly</option>
<option value="Quarterly">Quarterly</option>
<option value="Monthly">Monthly</option>
<option value="Weekly">Weekly</option>
</select>

<br>
Range:
<select id="user_defn_day" name="user_defn_day" align="center">
<option selected value="">
</select>

</form>
</body>
</html>