Get current value selected in dropdown using jQuery

Jquery

Jquery Problem Overview


I have a set of dynamically generated dropdown boxes on my page. basically I clone them using jQuery. now I want to capture the value selected on each dropdown on change event.

I tried something like this which did not work.

$('._someDropDown').live('change', function(e) {
            //debugger;
            var v = $(this);
            alert($(this + ':selected').val());
            alert($(this).val());
        });

How do I get it done?

Jquery Solutions


Solution 1 - Jquery

To get the text of the selected option

$("#your_select :selected").text();

To get the value of the selected option

$("#your_select").val();

Solution 2 - Jquery

This is what you need :)

$('._someDropDown').live('change', function(e) {
    console.log(e.target.options[e.target.selectedIndex].text);
});

For new jQuery use on

$(document).on('change', '._someDropDown', function(e) {
    console.log(this.options[e.target.selectedIndex].text);
});

Solution 3 - Jquery

$("#citiesList").change(function() {
    alert($("#citiesList option:selected").text());
    alert($("#citiesList option:selected").val());				
});

citiesList is id of select tag

Solution 4 - Jquery

Check it Out-->

For getting text

$("#selme").change(function(){
 $(this[this.selectedIndex]).text();
});

For getting value

$("#selme").change(function(){
 $(this[this.selectedIndex]).val();
});

Solution 5 - Jquery

You can try:

$("._someDropDown").val();

Solution 6 - Jquery

To get the value of a drop-down (select) element, just use val().

$('._someDropDown').live('change', function(e) {
  alert($(this).val());
});

If you want to the text of the selected option, using this:

$('._someDropDown').live('change', function(e) {
  alert($('[value=' + $(this).val() + ']', this).text());
});

Solution 7 - Jquery

try this...

$("#yourdropdownid option:selected").val();

Solution 8 - Jquery

This is actually more efficient and has better readability in my opinion if you want to access your select with this or another variable

$('#select').find('option:selected')

In fact if I remember correctly phpStorm will attempt to auto correct the other method.

Solution 9 - Jquery

In case you want the index of the current selected value.

$selIndex = $("select#myselectid").prop('selectedIndex'));

Solution 10 - Jquery

The options discussed above won't work because they are not part of the CSS specification (it is jQuery extension). Having spent 2-3 days digging around for information, I found that the only way to select the Text of the selected option from the drop down is:

{ $("select", id:"Some_ID").find("option[selected='selected']")}

Refer to additional notes below: Because :selected is a jQuery extension and not part of the CSS specification, queries using :selected cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. To achieve the best performance when using :selected to select elements, first select the elements using a pure CSS selector, then use .filter(":selected"). (copied from: http://api.jquery.com/selected-selector/)

Solution 11 - Jquery

You can also use :checked

$("#myselect option:checked").val(); //to get value

or as said in other answers simply

$("#myselect").val(); //to get value

and

$("#myselect option:checked").text(); //to get text

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionAmitView Question on Stackoverflow
Solution 1 - JqueryRobin RizviView Answer on Stackoverflow
Solution 2 - JqueryOlicalView Answer on Stackoverflow
Solution 3 - JqueryDharmeshView Answer on Stackoverflow
Solution 4 - JquerySukhjeevanView Answer on Stackoverflow
Solution 5 - JqueryalexlView Answer on Stackoverflow
Solution 6 - JqueryXhalentView Answer on Stackoverflow
Solution 7 - JqueryVivekView Answer on Stackoverflow
Solution 8 - JqueryMazzyView Answer on Stackoverflow
Solution 9 - JqueryOlivier.hView Answer on Stackoverflow
Solution 10 - Jqueryvijay pujarView Answer on Stackoverflow
Solution 11 - JqueryFankyView Answer on Stackoverflow