How to pass option into HTML select

Question

I want different behaviors depending on which <option> element is selected:

<select name="colorSelector" onchange="handleColorChange();">
    <option value="">- select -</option>
    <option value="1">Red</option>
    <option value="2">Blue</option>
</select>

function handleColorChange() {
    // Behave different depending on which <option> was just selected
}

What do I need to pass into the handleColorChange() method from inside the onchange listener in order to accomplish this?

Florian Margaine · Accepted Answer · 2012-04-19T17:15:55.837

2

Looks like noone has mentioned switch yet. Also, don't put the function in the HTML, that's just bad. Here is the right way:

document.getElementsByName( 'colorSelector' )[ 0 ].onchange = function ( ) {
    switch ( this.options[ this.selectedIndex ].value ) {
        case '1':
            // Do something when "Red" is selected
            break
        case '2':
            // Do something when "Blue" is selected
            break
    }
}

edited Apr 19 '12 at 17:15

answered Apr 19 '12 at 17:05

Florian Margaine

58,730
15
91
116

if it's in a form he can also use `document.forms[0].elements['colorSelect'].onchange` (assuming it's the first form on the page... or if you would prefer you can give your form a `name` and call it using that. – rlemon Apr 19 '12 at 17:09
I know. I was just adding that info ***in case*** the OP *does have it available* :P cheers – rlemon Apr 19 '12 at 17:25

score 1 · Answer 2 · answered Apr 19 '12 at 16:52

Try

function handleColorChange(self)
{
   console.log(self.selectedIndex);
   console.log(self.options[self.selectedIndex].text);
   console.log(self.options[self.selectedIndex].value)
};

And in HTML code

<select id="mySelect" name="colorSelector" onchange="handleColorChange(this);">

score 0 · Answer 3 · answered Apr 19 '12 at 16:48

you dont have to pass anything to function, just assign an id to select:

<select id="mySelect" name="colorSelector" onchange="handleColorChange();">
    <option value="">- select -</option>
    <option value="1">Red</option>
    <option value="2">Blue</option>
</select>

function handleColorChange() {
var x=document.getElementById("mySelect").selectedIndex;
var y=document.getElementById("mySelect").options;
alert("Index: " + y[x].index + " is " + y[x].text);
}

Or If you want to get by name then do this in your function:

var x=document.getElementsByName("colorSelector")[0].selectedIndex;
var y=document.getElementsByName("colorSelector")[0].options;
alert("Index: " + y[x].index + " is " + y[x].text);

score 0 · Answer 4 · answered Apr 19 '12 at 16:50

use this

<select name="colorSelector" onchange="handleColorChange(this);">
    <option value="">- select -</option>
    <option value="1">Red</option>
    <option value="2">Blue</option>
</select>

function handleColorChange(element) {
    // Behave different depending on which <option> was just selected
}

score 0 · Answer 5 · answered Apr 19 '12 at 16:52

<select name="colorSelector" onchange="handleColorChange(this);">
    <option value="">- select -</option>
    <option value="1">Red</option>
    <option value="2">Blue</option>
</select>


function handleColorChange(obj) {
    alert(obj.options[obj.selectedIndex].value);
}

JSFiddle here

How to pass option into HTML select

5 Answers5