Member Avatar for JohnBlanco

Hi,
I am having troubles finding something about dropdowns with javascript. I have two dropdowns, and I wanted to choose an option from the first and change the values that appear in the second.

Can anyone help me?

Thanks in advance

  • 2 Contributors
  • 3 Replies
  • 119 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by JohnBlanco
Member Avatar for parry_kulk

Hope this example helps you

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>  
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	var nums = new Array("1","2","3","4");
	var alphabets = new Array("A","B","C","D");

	function addOptions(dropDown, dispName, value){
		var optn = document.createElement("OPTION");
		optn.text = dispName;
		optn.value = value;
		dropDown.options.add(optn);
	}

	function setOption(form, index) {
		for (var i=form.List2.length; i>=0; i--) {//While removing options from a list always loop in descending order
			form.List2.remove(i);
		}

		if (index == 0) {
			for(var i=0; i<nums.length; i++){
				addOptions(form.List2, nums[i], nums[i])
			}
		}
		else if (index == 1) {
			for(var i=0; i<alphabets.length; i++){
				addOptions(form.List2, alphabets[i], alphabets[i])
			}
		}
		form.List2.selectedIndex = 0;
	}
  //-->
  </SCRIPT>
 </HEAD>

 <BODY onload="setOption(document.testForm, 0);">
  <FORM NAME="testForm">
	<SELECT name="List1" OnChange="setOption(this.form, this.selectedIndex)">
		<OPTION>Numbers</OPTION>
		<OPTION>Alphabets</OPTION>
	</SELECT>
	<SELECT name="List2" OnChange="setOption(this.form, this.selectedIndex)">		
		<OPTION>---</OPTION>
	</SELECT>
  </FORM>
 </BODY>
</HTML>
Member Avatar for parry_kulk

Sorry, there is a bug in the above example. Please replace the line

<SELECT name="List2" OnChange="setOption(this.form, this.selectedIndex)">

with

<SELECT name="List2" >
Member Avatar for JohnBlanco

Thank you very much for the example.
Kind regards

Sorry, there is a bug in the above example. Please replace the line

<SELECT name="List2" OnChange="setOption(this.form, this.selectedIndex)">

with

<SELECT name="List2" >
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.