How to create dynamic select boxes?
The example shows how to create two select boxes where a second listbox's selections are dependant on the item selected in the first listbox.<html>
<head>
<script language="javascript">
function setOptions(o)
{
var select2 = document.form1.select2;
select2.options.length = 0;
if (o == "1")
{
select2.options[select2.options.length] = new Option('Apple');
select2.options[select2.options.length] = new Option('Pear');
}
if (o == "2")
{
select2.options[select2.options.length] = new Option('Carrot');
select2.options[select2.options.length] = new Option('Potatoe');
}
if (o == "3")
{
select2.options[select2.options.length] = new Option('Chicken');
select2.options[select2.options.length] = new Option('Fish');
}
}
</script>
</head>
<body>
<form name="form1">
<select name="select1" size="1" onchange="setOptions(document.form1.select1.options[document.form1.select1.selectedIndex].value);">
<option value="1">Fruit</option>
<option value="2">Vegetable</option>
<option value="3">Meat</option>
</select>
<br />
<br />
<select name="select2" size="1">
<option>Apple</option>
<option>Pear</option>
</select>
</form>
</body>
</html> Display one set of the options (eg. Fruit - Apple, Pear) in HTML so that it will always be displayed when the page is loaded.
var select2 = document.form1.select2;
This creates a reference to the second listbox where the dynamically selected options will appear.
select2.options.length = 0;
This sets the second listbox options length to zero. It is very important to do this, or it will grow endlessly.
(document.form1.select1.option[document.form1.select1.selectedIndex].value);
This gets the selected value of the first listbox and passes it to the conditional statement.
if (o == "1")
If the selected value of the first listbox equals the value in the condition, the options defined in the Option array will appear in the second listbox.
Related threads:
<select> question
JavaScript FAQ
Sponsored links
Build IT Knowledge with Current & Trusted Content
Helps Employees Develop & Hone New Technical Programming Skills. Sign Up & Get Full Access.
Helps Employees Develop & Hone New Technical Programming Skills. Sign Up & Get Full Access.
Check Out IT Certification Preparation Materials
Sign Up With SkillSoft & Get Access to Training Materials for Over 50 Professional Certifications.
Sign Up With SkillSoft & Get Access to Training Materials for Over 50 Professional Certifications.
Web based bug tracking - AdminiTrack.com
AdminiTrack offers an effective web-based bug tracking system designed for professional software development teams.
AdminiTrack offers an effective web-based bug tracking system designed for professional software development teams.
Computer Professionals: Are you owed Overtime?
Federal and State Laws may allow computer professionals to collect overtime. Our law firm is experienced, and has initiated class action lawsuits against some of the largest computer companies to collect back pay and overtime. Strictly Confidential.
Federal and State Laws may allow computer professionals to collect overtime. Our law firm is experienced, and has initiated class action lawsuits against some of the largest computer companies to collect back pay and overtime. Strictly Confidential.
CSTSOFT Instrumentation .NET & ActiveX Components
A collection of 13 instrumentation .NET/ActiveX/VCL components including Gauge,Knob,LED,Trend etc.
A collection of 13 instrumentation .NET/ActiveX/VCL components including Gauge,Knob,LED,Trend etc.
