How do I change the contents of a listbox? 1

AlexNeil · Feb 11, 2002

I'd like to change the items that appear in a listbox based on the selection of radio buttons. So, suppose I have a radio button labelled "Alphabet" and another radio button labelled "Numbers", then I'd like the list box to display either the alphabet or numbers depending on what radio button was pressed.

I'd like this to be done using javascript so as to avoid re-loading the page each time.

I guess I need a function (or two?) that is triggered from each of the radio buttons "on change" event. What properties/methods should I use of the listbox to get it to clear it's contents and then load new ones?

Any help much appreciated.
Alex

mithrilhall · Feb 11, 2002

Here is some code for you to fool around with. Try it out to see how you can change the content of a list box.

<html>
<head>
<title>test</title>
<Script Language="JavaScript">
<!--
function trim(string)
{
fixedTrim = "";
lastCh = " ";

for (x = 0; x < string.length; x++)
{
ch = string.charAt(x);
if ((ch != " &quot

|| (lastCh != " &quot

)
{
fixedTrim += ch;
}
lastCh = ch;
}

//alert('Before:' + fixedTrim - 1);
if (fixedTrim.charAt(fixedTrim.length - 1) == " &quot

{
fixedTrim = fixedTrim.substring(0, fixedTrim.length - 1);
// alert('After:' + fixedTrim);
}

if(fixedTrim == '')
{
//alert('Please enter a color.');
}
else
{
nameditem = fixedTrim;
insert(nameditem);
//return fixedTrim;
}
}

function insert(nameditem)
{
if (document.frmTest.txt1.value != '' || ' ')
{
var newOption = document.createElement("OPTION&quot

;
newOption.text = nameditem;
newOption.value = nameditem;
document.frmTest.select1.add(newOption);
document.frmTest.txt1.value = "";
document.frmTest.txt1.focus();
}
else
{
alert('Please insert a value.');
}
}
function colors(selCol)
{
document.bgColor = selCol;
}
//-->
</Script>
</head>
<body>
<Form name="frmTest">
<input type=text value='' name="txt1">
<input type=button value=insert onclick="JavaScript:trim(txt1.value);document.frmTest.txt1.focus();">
<br>
<select name="select1" onChange="colors(this.value);document.frmTest.txt1.focus();" STYLE="WIDTH: 205px;">
<Option><------Choose Here-------></Option>
</select>
</Form>
</body>
</html>

AlexNeil · Feb 12, 2002

Cheers Mithrilhall - that works nicely. Do you know what the command is to clear a list box completely? Is it something like:

Code:

document.frmTest.select1.

clear

Code:

I've tried guessing the method's name, and had a scan around the web, but I can't find anything.

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!

How do I change the contents of a listbox? 1

AlexNeil

Programmer

mithrilhall

Programmer

AlexNeil

Programmer

Similar threads

Part and Inventory Search

Sponsor