Replace all values in a Listbox

I

IanONet

I have used
onChange="ReplaceValues(this.options[this.selectedIndex].value)" to
change several textbox values when a user makes a selection from a
Select List.

Now I have the requirement to replace all the values in another Select
List when a selection is made on the first Select List.

There are two questions: What is the Javascript syntax for deleting and
replacing option values in a Select List and how would you (how should
I ) store the data that I will be using to repopulate an existing
Select List.

Thanks,
IanO
 
T

Thomas 'PointedEars' Lahn

I have used
onChange="ReplaceValues(this.options[this.selectedIndex].value)" to
change several textbox values when a user makes a selection from a
Select List.

Only that there is no such built-in method. Which is why this information
is of little value to other people.
Now I have the requirement to replace all the values in another Select
List when a selection is made on the first Select List.

You are about the 4711th person to ask this here. Search the archives.
There are two questions: What is the Javascript syntax for deleting and
replacing option values in a Select List

- Deleting an option:

delete selectRef.options[index];

If that does not work:

selectRef.options[index] = null;

- Shortcut for deleting all options: selectRef.options.length = 0;
Fall back to a loop of the previous if that does not work.

- Replace option value:

selectRef.options[index].value = "...";

- Add new option:

selectRef.options[selectRef.options.length] = new Option(...);
and how would you (how should I ) store the data that
I will be using to repopulate an existing Select List.

This has been asked before, too. One possibility is:

var data = {
sel1Value1: [
{text: ..., value: ...},
...
],

sel1Value2: [
...
],

...
};

and then:

<script type="text/javascript">
function repopulate(oSrc, sTgt)
{
var oTgt = oSrc.form.elements[sTgt];
if (oTgt)
{
// TODO: delete all options of oTgt;
// maybe it is more efficient to overwrite existing options
// and delete only those that are no longer needed

var
curVal = oSrc.options[oSrc.selectedIndex],
curData = data[curVal];

for (var i = 0, len = curData.length; i < len; i++)
{
// TODO: add new option using properties of curData
}
}
}

<select ... onchange="repopulate(this, 'sel2');">

The data is best generated server-side, by a server-side fallback to handle
the case that client-side script or DOM support is not available.


PointedEars
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top