Question

I have a web page with 2 listboxes (HTML select control).
The first listbox is multi-select and contains a huge number of elements.

When I select one or more elements in the first listbox the content of the second listbox has to change based on the selected values. These values have to be taken from the database. Because the selection has to work instantly I have to do all of this on the client side without callback/postback. This means injecting the content of the database when the page loads and processing it with JQuery.

What approach do you suggest for storing such data in the page? Can you point me to some existing solution?

I don’t even know how to Google this.

Answer 1

I would create an object that holds the different items in arrays. Example:

var values = {
    cat1: ["item1", "item2", ...],
    cat2: ["item1", "item2", ...]
}

Whenever an element is selected from the first select, look up this value with values[selectedValue] which gives you the items for the other select box. Then you just have to generate the HTML for it.