Getting an option text/value with JavaScript

Question

I am trying to build a form that fills in a person's order.

<form name="food_select">
    <select name="maincourse" onchange="firstStep(this)">
        <option>- select -</option>
        <option text="breakfast">breakfast</option>
        <option text="lunch">lunch</option>
        <option text="dinner">dinner</option>
    </select>
</form>

What I'm trying to do is send in the select object, pull the name and the text/value from the option menu AND the data in the option tag.

function firstStep(element) {
    //Grab information from input element object
    /and place them in local variables
    var select_name = element.name;
    var option_value = element.value;
}

I can get the name and the option value, but I can't seem to get the text="" or the value="" from the select object. I only need the text/value from the option menu the user selected. I know I can place them in an array, but that doesn't help

var option_user_selection = element.options[ whatever they select ].text

I also need to use the passed in select reference as that is how it's set up in the rest of my code.

Later on, that text/value is going to be used to pull the XML document that will populate the next select form dynamically.

Using jQuery you could do something like jQuery('#mySelect option[value=myValue]') — Michel Ayres
– Michel Ayres, Commented Jul 15, 2015 at 18:58
Possible duplicate of Retrieving the text of the selected <option> in <select> element — Monir Tarabishi
– Monir Tarabishi, Commented Sep 30, 2016 at 6:24
Possible duplicate of Get selected value in dropdown list using JavaScript? — totymedli
– totymedli, Commented Jan 11, 2017 at 23:12

Phil · Accepted Answer · 2014-02-05 02:48:56Z

75

You can use:

var option_user_selection = element.options[ element.selectedIndex ].text

edited Feb 5, 2014 at 2:48

Phil

11.2k18 gold badges73 silver badges106 bronze badges

answered Jan 9, 2011 at 21:33

Chandu

83.2k19 gold badges136 silver badges136 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Jacob Valenta Over a year ago

Is there a jQuery alternative to this?

Chandu Over a year ago

Try this $("select[name='maincourse'").find('option:selected').text()

Chandu Over a year ago

@Phil the jquery version in my previous comment is in reply to Jacob's request. Can you elaborate n what's awful?

Phil Over a year ago

omgosh, I feel so bad, I thought you were a different guy CORRECTING Chandu, but you ARE Chandu... O_o I deleted my response...

Farzad J Over a year ago

sweet baby Jesus ! excatly what I needed :)

|

Andy · Accepted Answer · 2015-12-15 19:44:51Z

7

In jquery you could try this $("#select_id>option:selected").text()

edited Dec 15, 2015 at 19:44

Andy♦

50.8k62 gold badges181 silver badges240 bronze badges

answered Dec 15, 2015 at 19:33

Morganster

3112 silver badges7 bronze badges

3 Comments

sergdenisov Over a year ago

This does not provide an answer to the question. To critique or request clarification from an author, leave a comment below their post. - From Review

Morganster Over a year ago

why not? he want the text of the selected value.... that code returns the selected text on the select...

ymutlu Over a year ago

It seems like he is not using jq maybe thats why.

user4386053 · Accepted Answer · 2015-10-07 20:12:51Z

4

var option_user_selection = document.getElementById("maincourse").options[document.getElementById("maincourse").selectedIndex ].text

answered Oct 7, 2015 at 20:12

user4386053

Comments

Rostyslav Dzinko · Accepted Answer · 2012-08-16 19:46:53Z

3

form.MySelect.options[form.MySelect.selectedIndex].value

edited Aug 16, 2012 at 19:46

Rostyslav Dzinko

41k5 gold badges55 silver badges66 bronze badges

answered Jan 9, 2011 at 21:38

M99

1,90710 gold badges30 silver badges51 bronze badges

1 Comment

CoR Over a year ago

This have real educational value. No need for negative marks.

Collectives™ on Stack Overflow

Getting an option text/value with JavaScript

4 Answers 4

7 Comments

3 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

3 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related