Dynamically changing contents of ListBox

DKL01 · Oct 8, 2001

Hi,

I have list box and drop-down box. Based on the value selected in drop-down box I should change the contents of the the list box. The data for this list box is being retrieved from the database. I was wondering about the best way to implement this. How about having 2 list boxes and making them visible/ invisible based on selection in drop-down box ?

Thanks

ToddWW · Oct 8, 2001

I'm not sure how you want to initially populate the list box, so I'll leave that up to you. In this example, I initially have the list box with no options. I left out the <script> tags and <html> tags, so use this as an example or place the code in its appropriate place.

function changeListBox(form_obj) {
form_obj.listbox.options.length = 0
if (form_obj.dropdown.options[form_obj.dropdown.selectedIndex].value == "1&quot

{
form_obj.options[0] = new Option("Text1","Value1&quot

form_obj.options[1] = new Option("Text1","Value1&quot

// AND SO ON ..
}
if (form_obj.dropdown.options[form_obj.dropdown.selectedIndex].value == "2&quot

{
form_obj.options[0] = new Option("Text2","Value2&quot

form_obj.options[1] = new Option("Text2","Value2&quot

// AND SO ON ..
}

}

<select name="dropdown" onChange="changListBox(this.form);">
<option value="1">Change List Box to List #1</option>
<option value="2">Change List Box to List #2</option>
</select>

<select multiple name="listbox">
</select>

That should be enough to get the wheels spinning in your head. However, if you have many options in the drop down list and many options in the list box for each of those categories, your JavaScript function could be pretty large. Since you mentioned having two listboxes and hiding one / showing another, I assumed that you're working with a relatively small amount of options.. The function above will dynamically change the contents of the list box without having to reload the page.

Let me know if this helps.

TW

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Dynamically changing contents of ListBox

DKL01

Programmer

ToddWW

Programmer

Similar threads

Part and Inventory Search

Sponsor