Skip to content

Instantly share code, notes, and snippets.

@fitoria

fitoria/gist:92143

Created April 9, 2009 00:07
Show Gist options
  • Save fitoria/92143 to your computer and use it in GitHub Desktop.
Save fitoria/92143 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.htm
<html>
<head><title>Javascript Dynamic ListBox Demonstration</title>
</head>
<body bgcolor="#ffffff" OnLoad="setOption(document.ThisForm, 0)">
<h2>Javascript Dynamic ListBox Demonstration</h2>
<hr>
<blockquote>
<form name="ThisForm">
<!--
The listbox size should be same as the list which has the maximum size.
i.e. The number of "<option>" = the size of the maximum list.
//-->
<select name="List1" OnChange="setOption(this.form, this.selectedIndex)">
<option>Animals
<option>Colours
<option>Numbers
<option>Places
</select><p>
<select name="List2" OnChange="this.form.ValueIn2.value=this.options[this.selectedIndex].value">
<option>
<option>
<option>
<option>
<option>
<option>
<option>_________________
</select>
Value in second listbox: <input name="ValueIn2" size="5">
</form>
<script language="javascript">
<!--
function setOption(form, index) {
for (var i = 0; i < form.List2.length; i++) {
form.List2.options[i].text = "";
form.List2.options[i].value = "";
}
if (index == 0) {
form.List2.options[0].text = "Cat";
form.List2.options[0].value = "ani0";
form.List2.options[1].text = "Lion";
form.List2.options[1].value = "ani1";
form.List2.options[2].text = "Tiger";
form.List2.options[2].value = "ani2";
form.List2.options[3].text = "Dog";
form.List2.options[3].value = "ani3";
form.List2.options[4].text = "Cow";
form.List2.options[4].value = "ani4";
form.List2.options[5].text = "Snake";
form.List2.options[5].value = "ani5";
form.List2.options[6].text = "Monkey";
form.List2.options[6].value = "ani6";
}
else if (index == 1) {
form.List2.options[0].text = "Blue";
form.List2.options[0].value = "col0";
form.List2.options[1].text = "Red";
form.List2.options[1].value = "col1";
form.List2.options[2].text = "Yellow";
form.List2.options[2].value = "col2";
form.List2.options[3].text = "Green";
form.List2.options[3].value = "col3";
form.List2.options[4].text = "Orange";
form.List2.options[4].value = "col4";
}
else if (index == 2) {
form.List2.options[0].text = "One";
form.List2.options[0].value = "num0";
form.List2.options[1].text = "Two";
form.List2.options[1].value = "num1";
form.List2.options[2].text = "Three";
form.List2.options[2].value = "num2";
form.List2.options[3].text = "Four";
form.List2.options[3].value = "num3";
form.List2.options[4].text = "Five";
form.List2.options[4].value = "num4";
}
else if (index == 3) {
form.List2.options[0].text = "Airport";
form.List2.options[0].value = "pla0";
form.List2.options[1].text = "Railway Station";
form.List2.options[1].value = "pla1";
form.List2.options[2].text = "Museum";
form.List2.options[2].value = "pla2";
form.List2.options[3].text = "Stadium";
form.List2.options[3].value = "pla3";
}
form.List2.selectedIndex = 0;
form.ValueIn2.value = form.List2.options[form.List2.selectedIndex].value;
}
//-->
</script>
<p>
</center>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment