Hi All -
I'm trying to get the value of one listbox to dynamically repopulate another. I've read the FAQ on dynamic listboxes by iza, and it would seem to be exactly what I want to do. Here's the problem: When I select an option from the first listbox, it adds new options to the second listbox, but the text is not displayed! In other words, if my second list box gets all of its options deleted, and then gets three new ones added, then the listbox drops down and shows three empty rows! Any thoughts? It almost seems like the screen isn't repainting correctly??? Here's an example of my source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Listbox Test</title>
<script language="JavaScript">
function FirstChoice_Change()
{
var oOption = document.createElement("OPTION"
;
oSecond.text = oFirst.text;
oSecond.value = oFirst.value;
oSecond.options.add(oOption);
return true;
}
function SecondChoice_Change()
{
var oOption = oSecond.value;
MyText.value = oOption;
return true;
}
</script>
</head>
<body>
<select id="oFirst" name="FirstChoice" onchange="FirstChoice_Change()">
<option value=0>- Pick a value -
<option value=1>One
<option value=2>Two
<option value=3>Three
</select>
<select id="oSecond" name="SecondChoice" onchange="SecondChoice_Change()">
<option value=0>- Pick another value -
</select>
<input type="text" id="MyText">
</body>
</html>
I'm trying to get the value of one listbox to dynamically repopulate another. I've read the FAQ on dynamic listboxes by iza, and it would seem to be exactly what I want to do. Here's the problem: When I select an option from the first listbox, it adds new options to the second listbox, but the text is not displayed! In other words, if my second list box gets all of its options deleted, and then gets three new ones added, then the listbox drops down and shows three empty rows! Any thoughts? It almost seems like the screen isn't repainting correctly??? Here's an example of my source:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Listbox Test</title>
<script language="JavaScript">
function FirstChoice_Change()
{
var oOption = document.createElement("OPTION"
;oSecond.text = oFirst.text;
oSecond.value = oFirst.value;
oSecond.options.add(oOption);
return true;
}
function SecondChoice_Change()
{
var oOption = oSecond.value;
MyText.value = oOption;
return true;
}
</script>
</head>
<body>
<select id="oFirst" name="FirstChoice" onchange="FirstChoice_Change()">
<option value=0>- Pick a value -
<option value=1>One
<option value=2>Two
<option value=3>Three
</select>
<select id="oSecond" name="SecondChoice" onchange="SecondChoice_Change()">
<option value=0>- Pick another value -
</select>
<input type="text" id="MyText">
</body>
</html>