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.

http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript — trante, Feb 04 '14 at 18:58
Using jQuery you could do something like `jQuery('#mySelect option[value=myValue]')` — Michel Ayres, Jul 15 '15 at 18:58
Possible duplicate of [Get selected value in dropdown list using JavaScript?](http://stackoverflow.com/questions/1085801/get-selected-value-in-dropdown-list-using-javascript) — totymedli, Jan 11 '17 at 23:12

score 76 · Accepted Answer · edited Feb 05 '14 at 02:48

76

You can use:

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

edited Feb 05 '14 at 02:48

Phil

10,948
17
69
101

answered Jan 09 '11 at 21:33

Chandu

81,493
19
133
134

1

Is there a jQuery alternative to this? – Jacob Valenta Oct 26 '13 at 16:36
8

Try this `$("select[name='maincourse'").find('option:selected').text()` – Chandu Oct 26 '13 at 17:01
@Phil the jquery version in my previous comment is in reply to Jacob's request. Can you elaborate n what's awful? – Chandu Feb 05 '14 at 01:22
omgosh, I feel so bad, I thought you were a different guy CORRECTING Chandu, but you ARE Chandu... O_o I deleted my response... – Phil Feb 05 '14 at 02:48
sweet baby Jesus ! excatly what I needed :) – Farzad J Apr 17 '15 at 14:07
You are the massiah. – marcusshep Oct 19 '16 at 15:00
@Chandu I liked your commnent, but I have to add a `trim()` at the end to delete unnecessary white spaces. – Tito Leiva Dec 10 '19 at 14:25

score 7 · Answer 2 · edited Dec 15 '15 at 19:44

7

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

edited Dec 15 '15 at 19:44

Andy

49,085
60
166
233

answered Dec 15 '15 at 19:33

Morganster

311
2
7

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](/review/low-quality-posts/10574392) – sergdenisov Dec 15 '15 at 22:17
why not? he want the text of the selected value.... that code returns the selected text on the select... – Morganster Dec 16 '15 at 22:55
1

It seems like he is not using jq maybe thats why. – ymutlu Jun 01 '16 at 22:38

score 4 · Answer 3 · answered Oct 07 '15 at 20:12

4

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

answered Oct 07 '15 at 20:12

score 3 · Answer 4 · edited Aug 16 '12 at 19:46

3

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

edited Aug 16 '12 at 19:46

Rostyslav Dzinko

39,424
5
49
62

answered Jan 09 '11 at 21:38

M99

1,859
10
28
50

This have real educational value. No need for negative marks. – CoR Oct 14 '15 at 09:52

Getting an option text/value with JavaScript

4 Answers4

Linked

Related