jQuery get selected option value (not the text, but the attribute 'value')
Okay, I have this code:
<select name="selector" id="selector">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</select>
And I'd like to get the value of the option selected. Example: 'Option 2' is selected, and the value of it is '2'. The '2' is the value I need to get and not 'Option 2'.
Solution 1:
04/2020: Corrected old answer
Use :selected pseudo selector on the selected options and then use the .val function to get the value of the option.
$('select[name=selector] option').filter(':selected').val()
Side note: Using filter is better then using :selected
selector directly in the first query.
If inside a change handler, you could use simply this.value
to get the selected option value. See demo for more options.
//ways to retrieve selected option and text outside handler
console.log('Selected option value ' + $('select option').filter(':selected').val());
console.log('Selected option value ' + $('select option').filter(':selected').text());
$('select').on('change', function () {
//ways to retrieve selected option and text outside handler
console.log('Changed option value ' + this.value);
console.log('Changed option text ' + $(this).find('option').filter(':selected').text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select>
<option value="1" selected>1 - Text</option>
<option value="2">2 - Text</option>
<option value="3">3 - Text</option>
<option value="4">4 - Text</option>
</select>
Old answer:
Edit: As many pointed out, this does not returns the selected option value.
~~Use .val to get the value of the selected option. See below,
$('select[name=selector]').val()~~
Solution 2:
I just wanted to share my experience
For me,
$('#selectorId').val()
returned null.
I had to use
$('#selectorId option:selected').val()
Solution 3:
$('select').change(function() {
console.log($(this).val())
});
jsFiddle example
.val()
will get the value.
Solution 4:
You need to add an id to your select. Then:$('#selectorID').val()