Problem: dynamic option list and selecting [Archive]

Bodger

01-21-2003, 04:41 PM

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 [i] = new Option (
myArray [current].subCategories [i], 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="Submit">
</form>
</body>
</html>
--------------------------------------------------------------

AdamBrill

01-21-2003, 06:19 PM

I'm not exactly sure what you want to do. You don't want the option box to be blank after you change it, is that it? If that is what you want, try changing this line:

document.main.subcategories.selectedIndex = 0;

to:

document.main.subcategories.selectedIndex = 1;

I think that might fix your problem. Let me know if that's not what you wanted...

Bodger

01-21-2003, 06:41 PM

Thank you that was exactly what I needed, I did not realize that the offset for selectedIndex is 1. I have been putting this together by reading examples, the sophisticated stuff does not seem to be documented anywhere but in examples.

Thank you

Bodger