How can I select the value of a selected option with jQuery?

Question

I am struggling to find the answer from the documentation.

.form-group                                                                                 
  label.col-md-3.control-label(for='industry') Industry                                     
  .col-md-9                                                                                 
    select#industries.form-control                                                          
           option(value='Please Select') Please Select                                           
           option(value='A') A                                              
           option(value='C') C                                            
           option(value='D') D                                          
           option(value='S') S                                                   
           option(value='E') E

If there is an easier solution with JavaScript, I'd welcome that too.

Possible duplicate of [jQuery Get Selected Option From Dropdown](http://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — Axcel, May 02 '17 at 20:43
Please search before you ask [Duplicated](http://stackoverflow.com/questions/10659097/jquery-get-selected-option-from-dropdown) — Axcel, May 02 '17 at 20:43

score 1 · Accepted Answer · answered May 02 '17 at 20:43

Supposing you use 'my-select' as id of the select, you can do

$('#my-select').val();

Otherwise with JavaScript:

document.querySelector('#my-select').value;

Considering the selectors you wrote above, this should be your selector (but I need to see the HTML to be sure):

$('.form-group label.col-md-3.control-label[for="industry"] .col-md-9  select#industries.form-control')

although this should be fine as well:

$('select#industries')

score 1 · Answer 2 · answered May 02 '17 at 20:46

You don't need to worry about getting the selected option. Just get the value of the select:

$( "select" ).change(function () {
    // Just use the val() method on the select to get its current value
    $( "#output" ).text( $(this).val() );
}).change();

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<p>Click your selection: </p>
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<div>You selected: <span id="output"></span></div>

score 1 · Answer 3 · answered May 02 '17 at 20:54

If someone is looking for javascript solution, it could be done this way:
1.Select the dropdown element
2.Extract value from options collection

function test() {
  var elem = document.getElementById('industries');
  var val = elem.options[elem.selectedIndex].value;
  console.log('Value=' + val);
}

<select id="industries">
        <option value='Please Select'>Please Select</option>  
        <option value='A'>A</option>  
        <option value='B'>B</option>                                 </select>   

<button class="btn btn-success" id="buttonCode" type="button" onclick="test()">test</button>

granmirupa · Answer 4 · 2017-05-02T22:05:06.493

0

Just use $('#industries').val(); in JQuery

edited May 02 '17 at 22:05

answered May 02 '17 at 20:43

granmirupa

2,780
16
27

Or how about just: `$('#industries').val();` instead? – Scott Marcus May 02 '17 at 21:08
@ScottMarcus about the _select_, I know that an ID should be unique. But working with people thaught me it's not always true for everybody. About the way to select there are dozens of ways for doing it: _$('select option:selected').val()_ will also work. – granmirupa May 02 '17 at 21:14
It's not a matter of what will work. `:selected` is redundant. It's more to type and actually performs slower than just getting the value. As for `id`s, saying that you wrote a more complicated selector to protect against invalid HTML is really just a band-aid. The real cure is to write valid HTML and then use the appropriate selectors for it. – Scott Marcus May 02 '17 at 21:57
@ScottMarcus approved. Thanks for explaining – granmirupa May 02 '17 at 22:06

Devendra Lattu · Answer 5 · 2017-05-02T21:16:40.610

-1

$( "select" ).change(function () {
    // Previous answer: technically incorrect logic
    // var str = $( "select option:selected" ).text();
    // $( "div" ).text( str );

    $( "div" ).text( $(this).val() );
});

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<select multiple="multiple">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>
<div></div>

Reference

edited May 02 '17 at 21:16

answered May 02 '17 at 20:45

Devendra Lattu

2,732
2
18
27

Super overkill. You only need to get the `val()` of the `select`. No need to test for the selected option. – Scott Marcus May 02 '17 at 20:47
@ScottMarcus, I appreciate you figured out the redundancy in my code. I have updated it :) Thank you. – Devendra Lattu May 02 '17 at 20:50
Still not right. Form elements use the `val()` method to get their value and you are still querying for the `selected` `option`. That is not necessary. See my answer for correct way. – Scott Marcus May 02 '17 at 20:50
I tried executing using the `Run code snippet`. It worked well. Meanwhile, I will clear my confusion on `.val()` and `.text()` – Devendra Lattu May 02 '17 at 20:52
It may have worked, but it's still overkill. HTML form elements have names and values. Always use `val()` to get their value. `text()` can be different than the actual value. – Scott Marcus May 02 '17 at 20:52
`.val()` only selects the first occurrence of `select` element. `.text()` selects all the selected elements. – Devendra Lattu May 02 '17 at 20:54
Not quite. First, `.text()` is for non-form elements. If you look at the JQuery documentation for it (http://api.jquery.com/text/), you will see a `
` element being used in the example. When it is used, it combines the text of all the elements in the JQuery wrapped set. `val()` is exclusively for form elements. `select` is a form element. Here's the documentation for it: http://api.jquery.com/val/. Here, `val()` will return the value of a form element. If that element can have multiple values, all the values from that single element are combined. This goes to the nature of HTML forms.
– Scott Marcus May 02 '17 at 20:59
The reason we need to distinguish between `text()` and `val()` is that some form elements can display some text but store a different value. Such is the case with ``. `CT` is the value and `Connecticut` is the text. `CT` is what gets submitted with the form and that's why we care about `value` and not text when it comes to form elements. – Scott Marcus May 02 '17 at 21:02
@ScottMarcus, I appreciate you clarifying my concerns. I will make a note of it. – Devendra Lattu May 02 '17 at 21:07
This was an overkill for sure (as you said earlier :p) – Devendra Lattu May 02 '17 at 21:09
@ScottMarcus, I have kept the old logic in code comments for users to understand. I would appreciate if you make bring my answer back to `0 score` so that people learn from my mistake as well as read your helpful comments. – Devendra Lattu May 02 '17 at 21:20

How can I select the value of a selected option with jQuery?

5 Answers5