[JAVASCRIPT] how to add options to dropdown boxes dynamically

**oceanebelle** · Aug 17th, 2005, 11:52 PM

HOw?

somehow the add function here won't work

HTML Code:

<html>
<head>
<script type="text/javascript">
function formAction(choice)
{

var from, to;
var selected;



switch(choice){
case 1:
from=document.getElementById("myFirstList")
to=document.getElementById("mySecondList")
alert("event fired first to second")
break;
case 2:
from=document.getElementById("mySecondList")
to=document.getElementById("myFirstList")
alert("event fired second to first")
break;
}

selected = from.options[from.selectedIndex].text
alert(selected)

     from.remove(from.selectedIndex)
     to.add(selected);
    
alert(from.length + ", " + to.length)

}
</script>
</head>

<body>
<form name="anotherform">
<select id="myFirstList" size=4>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>four</option>
</select>


<input type="button" onclick="formAction(1)" value="FIrst >> SEcond">

<input type="button" onclick="formAction(2)" value="second >> first">

<select id="mySecondList" size=4>
</select>

</form>
</body>

</html>

**oceanebelle** · Aug 18th, 2005, 12:17 AM

I searched the forum and indeed there have been other questions relating to this one but there are no answers posted on this forum.. so I will post the one my friend taught me.

Code:

from.remove(from.selectedIndex)

var newOption = new Option();
newOption.text = selected

to.options[to.length] = newOption;

It seems I was missing Option Objects.

**oceanebelle** · Aug 18th, 2005, 12:26 AM

Code:

<html>
<head>
<script type="text/javascript">
function formAction(choice)
{

var from, to;
var selected;



switch(choice){
case 1:
from=document.getElementById("myFirstList")
to=document.getElementById("mySecondList")
//alert("event fired first to second")
break;
case 2:
from=document.getElementById("mySecondList")
to=document.getElementById("myFirstList")
//alert("event fired second to first")
break;
}

selected = from.options[from.selectedIndex].text
//alert(selected)
/*
     from.remove(from.selectedIndex)
     var newOption = new Option();
     newOption.text = selected
     to.options[to.length] = newOption;
*/

     to.options[to.length] = from.options[from.selectedIndex];
    
//alert(from.length + ", " + to.length)


}
</script>
</head>

<body>
<form name="anotherform">
<select id="myFirstList" size=4>
<option>One</option>
<option>Two</option>
<option>Three</option>
<option>four</option>
</select>


<input type="button" onclick="formAction(1)" value="FIrst >> SEcond">

<input type="button" onclick="formAction(2)" value="second >> first">

<select id="mySecondList" size=4>
</select>

</form>
</body>

</html>

the code in bold now i discovered automatically moves the options from one select to another.. hmm... didn't know it... lesser code... that was what I wanted.. move an option from one dropdown box to another. and there is a one line code for that

**eyeRmonkey** · Aug 18th, 2005, 12:36 PM

Ok, I'm confused oceane. Did you solve the problem or do you still have any questions? I'd be glad to help if you were still having issues with this. Thanks.

**oceanebelle** · Aug 18th, 2005, 07:14 PM

A friend gave me the answers.. so I posted it, then also stumbled something(assigning an option from one select box into another moves that option to that other select box) and posted it.. basically solved

thanks eyeR

Thread: [JAVASCRIPT] how to add options to dropdown boxes dynamically

Thread Tools

Display

[JAVASCRIPT] how to add options to dropdown boxes dynamically

Re: [JAVASCRIPT] how to add options to dropdown boxes dynamically

Re: [JAVASCRIPT] how to add options to dropdown boxes dynamically

Re: [JAVASCRIPT] how to add options to dropdown boxes dynamically

Re: [JAVASCRIPT] how to add options to dropdown boxes dynamically

Posting Permissions