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
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
Jump to PostHope 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); } …
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>
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" >
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" >
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.