Problem: dynamic option list and selecting

admin · Aug 22, 2008

Hi everyone

I have attached a simple html page that has one select pulldown in a form, and a button.

If you click on the button it changes the options in the pulldown list, just the way I want it to. That works fine.

What I cannot get to work is that when I update the list of options, I want it to select the first option (option 0).

After I fill in the option list I then set the selectedIndex of the select object and it does not fail, but does not put the selected option in the text portion of the pulldown.

I must be doing something wrong, but I don't know what, could you help me please?

Thank you

Bodger

--------------------------------------------------------------
<html>
<body>
<script>
var myArray = new Array (3);
var current = -1;

function AddSubCategory (name)
{
var idx;

idx = this.subCategories.length;
this.subCategories [idx] = name;
}

function Category (name)
{
this.name = name;
this.subCategories = new Array (1);
this.AddSubCategory = AddSubCategory;
}

myArray[0] = new Category ("CAT 1");
myArray[1] = new Category ("CAT 2");
myArray[2] = new Category ("CAT 3");

myArray[0].AddSubCategory ("CAT 0 - SUBCAT 1");
myArray[0].AddSubCategory ("CAT 0 - SUBCAT 2");
myArray[0].AddSubCategory ("CAT 0 - SUBCAT 3");

myArray[1].AddSubCategory ("CAT 1 - SUBCAT 1");
myArray[1].AddSubCategory ("CAT 1 - SUBCAT 2");
myArray[1].AddSubCategory ("CAT 1 - SUBCAT 3");
myArray[1].AddSubCategory ("CAT 1 - SUBCAT 4");

myArray[2].AddSubCategory ("CAT 2 - SUBCAT 1");
myArray[2].AddSubCategory ("CAT 2 - SUBCAT 2");
myArray[2].AddSubCategory ("CAT 2 - SUBCAT 3");

function changeOptionList ()
{
current++;
if (current > 2)
current = 0;

var len;
var i;

// now create the list

len = myArray[current].subCategories.length;

for (i = 0; i < len; ++i)
{
document.main.subcategories.options = new Option (
myArray [current].subCategories , i);
}

document.main.subcategories.length = len;
document.main.subcategories.selectedIndex = 0;
}

function showSelected ()
{
var idx = document.main.subcategories.selectedIndex;

var string = "SelectedIndex (" + idx + ")";

alert (string);

return (false);
}
</script>
<form name="main" ONSUBMIT="return showSelected ();">
<BUTTON name="change_option" type="button" ONCLICK="changeOptionList ()">
Change Option List
</BUTTON>
<SELECT name="subcategories">
</SELECT>
<input type=submit name="submit" value=http://www.webdeveloper.com/forum/archive/index.php/"Submit">
</form>
</body>
</html>
--------------------------------------------------------------

Problem: dynamic option list and selecting

admin

Administrator