Announcement

**liorean** · Mar 4, 2004, 07:04 PM

Try this:

Code:

document.getElementById('sname').options[document.getElementById('sname').selectedIndex].text="Happy";

Of that doesn't work, it's possible you need to insert a '.options' before '.selectedIndex'.

**Basscyst** · Mar 4, 2004, 07:15 PM

Thanks, but I understand how to reference and replace the selected index, I don't know how to reference the options that are not selected or even created yet for that matter.

What I'd like to do is loop through an array and then build the select box using each array element.

Non working Example:

Code:

function fillMenu()
{
var myList=new Array('a','b','c','d','e','f','g');

for(i=0;i<myList.length;i++)
{
  mySelectId.options[i].text=myList[i];
}
}

So that each menu Item in the select box is now respective to the elements in the array.

Hope that is clearer,
Basscyst

**Basscyst** · Mar 4, 2004, 07:19 PM

ROFL- OK, I guess I got lucky, That was a working example. Seems to do the trick.

Basscyst

**Basscyst** · Mar 4, 2004, 07:36 PM

OK - my luck ran out. My script above works, but only if the options are already defined. How can I get it to add options even if they are not yet specified.

Here is my complete code slightly modified so it will work:

Code:

<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
var sfo=new ActiveXObject('scripting.FileSystemObject');

function fillMenu()
{
	myList=new Array('a','b','c')
	for(i=0;i<myList.length;i++)
	{
	  document.getElementById('sname').options[i].text=myList[i];
	}
}


</script>
</head>
<body onload="fillMenu();">
<form id="f1">
<table id="t1">
<thead>
	<th>Supervisor</th>
</thead>
<tr>
	<td>
	<select id="sname">
	<option></option>
	</select>
	</td>
</tr>
</table>

As you can see it only loads the "a" and drops the "b" and "c".

Thanks,
Basscyst

**Willy Duitt** · Mar 4, 2004, 08:14 PM

Does this help?

Code:

<script type="text/javascript">
 <!--//
  function loadOptions(which){
    var theOptions = document.form1.menu; // FORM NAME //;
    var main = new Array();
        main[0]=new Option('Pick A Subject','default');
        main[1]=new Option('Animals','animals');
        main[2]=new Option('Cars','cars');

    var animals = new Array();
        animals[0]=new Option('Pick An Animal','default');
        animals[1]=new Option('Cats','cats');
        animals[2]=new Option('Dogs','dogs');
        animals[3]=new Option('Pigs','pigs');
        animals[4]=new Option('Return To Main Menu','main');

    var cars = new Array();
        cars[0]=new Option('Pick A Car','default');
        cars[1]=new Option('Buick','buick');
        cars[2]=new Option('Chevy','chevy');
        cars[3]=new Option('Olds','olds');
        cars[4]=new Option('Return To Main Menu','main');

   if(which.toLowerCase() == 'main')    {myOptions = main};
   if(which.toLowerCase() == 'animals') {myOptions = animals};
   if(which.toLowerCase() == 'cars')    {myOptions = cars};

     for(j=theOptions.length; j>myOptions.length-1; j--){
       if(theOptions.length > myOptions.length){
          for(i=0; i<myOptions.length; i++){
              theOptions[i] = myOptions[i];
              theOptions[j] = null;
          }
       }
     }

       if(myOptions.length > theOptions.length){
         for(i=0; i<myOptions.length; i++){
             theOptions[i] = myOptions[i];
         }
       }

  }
 //-->
</script>
</HEAD>

<BODY onload="loadOptions('main')">
<form name="form1">
<select name="menu" onchange="loadOptions(this[this.selectedIndex].value)"></select>
</form>

.....Willy

**Basscyst** · Mar 4, 2004, 09:26 PM

Sure does. Perfect. Thanks.

Basscyst

[edit]
This is what I came up with, I just needed to add 1 to the length of the select.

Code:

<html>
<head>
<script type="text/javascript">

function fillMenu()
{
	var myList=new Array('a','b','c')
	for(i=0;i<myList.length;i++)
	{
		var menu1=document.getElementById('sname');
		menu1.length++;
		menu1.options[i].text=myList[i];
		menu1.options[i].value=myList[i]+i;
		
	}
}
</script>
</head>
<body onload="fillMenu();">
<form id="f1">
<table id="t1">
<thead>
	<th>Supervisor</th>
</thead>
<tr>
	<td>
	<select id="sname">
	</select>
	</td>
</tr>
</table>
</form>
</html>

Thanks again,
Basscyst

**glenngv** · Mar 4, 2004, 10:03 PM

or you can just increment the option index for each iteration.

Code:

function fillMenu()
{
   var myList=new Array('a','b','c');
   var sel = document.getElementById('sname');
   for(i=0;i<myList.length;i++)
   {
      sel.options[sel.options.length] = new Option(myList[i], myList[i]+i);
   }
}

**Basscyst** · Mar 4, 2004, 11:28 PM

Ahh. Very cool. Much better. Thank You Willy and Glenn

I didn't know you could define options that way.

Basscyst

Announcement

Dynamically filling a select box

Dynamically filling a select box

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment