JS to select an option in a combo box

[mr_burns]

hi,
using javascript, how do i select an option in a combo box? i have
tried looking on the internet but dont really know what i should be
searching for. what i want to happen is that when a function is called
a line of code will select a specific option in a combo box. something
like:



//excuse the dodgy syntax

function select_combo() {

cb_1.select[3] //where option 3 will be selected (or 4 if first index
is 0)

}



the combo box would be something like:


<select>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>


The function would change the selection in the combo box. any ideas
for the function code? cheers

burnsy

 

[Reply Via Newsgroup]

hi,
using javascript, how do i select an option in a combo box? i have
tried looking on the internet but dont really know what i should be
searching for. what i want to happen is that when a function is called
a line of code will select a specific option in a combo box. something
like:



//excuse the dodgy syntax

function select_combo() {

cb_1.select[3] //where option 3 will be selected (or 4 if first index
is 0)

}



the combo box would be something like:


<select>
<option>First</option>
<option>Second</option>
<option>Third</option>
</select>


The function would change the selection in the combo box. any ideas
for the function code? cheers

burnsy

I just managed to do something like this recently, and I got some help
from this newsgroup.

Its not that difficult however it would be easier (less code) if you had
values applied to your options and given your select box a name. For
example, below, I've named your select box elvis that resides in a form
called music... I've written this code freehand without checking using
notes I'd made - I would hope my remarks make it easier for you to see
what happens and how it is done and allow you to play with it for your
own requirements.


<form name="music">
<select name="elvis" onChange="shoutAboutIt();">
<option value="a">First</option>
<option value="b">Second</option>
<option value="c">Third</option>
</select>
</form>

<script language="javascript">
function shoutAboutIt()
{
////////////// start of our functino //////////////
// ourFormis the name of our form (less characters to type)
ourForm=document.music;

// Determine the total number of options you have in your select box
boxLength=ourForm.elvis.length;

// Get the selected item - this I believe if memory serves me correct
// will return a number (in your example above, if you had First
// selected, it would return zero - Second returns 1 and Third returns 2
var selectedItem = ourForm.elvis.selectedIndex;

// selectedValue - if you selected First, selectedValue would equal a
var selectedValue = ourForm.options[selectedItem].value;

// selectedText - if you selected First, selectedItem would equal First
var selectedText = ourForm.options[selectedItem].text;

// shout an alert box with the selected option
alert("You selected "+selectedText+" which is option "+selectedValue);

// Return false so the form is *not processed* via POST or GET
// Return true so the form is *processed* via POST or GET
return false;
////////////// end of our functino //////////////
}
</script>


Hope it helps - I'm glad to share the help I got from others a few weeks
ago.

randelld

 

[Frostillicus]

Try this:

cb_1.selectedIndex = 3;

 

[Michael Winter]

On Sat, 3 Apr 2004 10:59:04 +1000, Frostillicus

[changing the current selection of a SELECT element]

Try this:

cb_1.selectedIndex = 3;

However, that would go against your previous advice to mr_burns, but cause
only Opera and IE[1] support referring to elements by their names or ids.

Always use a proper reference to access controls:

<URL:http://jibbering.com/faq/#FAQ4_13>

Mike


[1] There will probably be others. I just don't know of them.

 

[Frostillicus]

Agreed - I was just being lazy and putting it into terms mr_burns is already
familiar with...