Jquery Get Selected Option from Dropdown

jQuery Get Selected Option From Dropdown

For dropdown options you probably want something like this:

var conceptName = $('#aioConceptName').find(":selected").text();

The reason val() doesn't do the trick is because clicking an option doesn't change the value of the dropdown--it just adds the :selected property to the selected option which is a child of the dropdown.

jQuery get selected option value (not the text, but the attribute 'value')

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>

How to use jQuery to select a dropdown option?

How about

$('select>option:eq(3)').attr('selected', true);

Example:

$('select>option:eq(3)').attr('selected', true);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

Get selected value of a dropdown's item using jQuery

For single select dom elements, to get the currently selected value:

$('#dropDownId').val();

To get the currently selected text:

$('#dropDownId :selected').text();

How to get all options of a select using jQuery?

Use:

$("#id option").each(function()
{
    // Add $(this).val() to your list
});

.each() | jQuery API Documentation

How to get selected option value of dropdown using jquery?

https://jsfiddle.net/programtheweba/8gohx47g/

By using Jquery text(), we will get only text and characters are not encoded.

alert('text() : ' +$('#dropdown').text());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><select id="dropdown"><option selected>Test & Get knowledge</option></select>

Get value of selected option using jquery

You don't need to convert it to ~~javascript object~~ raw DOM Element, just do this:

$( ".course_list option:selected" ).val()

When you do $( ".course_list option:selected" )[0] you are getting raw DOM Element it is not a jquery object so call val() on it will give you error.

With DOM element you can try it like this:

$( ".course_list option:selected" )[0].getAttribute("value")

For more understanding you can refer this SO Post

Get selected option's text in an HTML select using jQuery

You cannot use selector like this:

$('.productOptionViewSelect option:eq(1)')

because in this result set only one of those options will have index 1 - the index of the second option in second .productOptionViewSelect div will get the index equal to the index of the last option in first div plus 2.

Therefore yo should iterate over those 2 sets of options and use .text():

$('.productOptionViewSelect').each(function(){
    console.log($(this).find('option:eq(1)').text());
});

Output:

Frame Size
Photo Size

Get selected option text and not value

Try this:

$("#usersDropDown").multipleSelect({
  placeholder: "Select Users",
  selectAll: true,
  width: "100%",
  filter: true,
});
$("#usersDropDown").on('change',function ()
{
  var getSelected = $("#usersDropDown").multipleSelect('getSelects', 'text');
  alert(getSelected)
});

Jquery Get Selected Option from Dropdown