CODEWITHSUNDEEP
jquery
Amit
Amit

Reputation: 26326

Get current value selected in dropdown using jQuery

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?

Upvotes: 64

Views: 164594

Answers (11)

Fanky
Fanky

Reputation: 1795

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

Upvotes: 1

Olivier.h
Olivier.h

Reputation: 51

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

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

Upvotes: 3

vijay pujar
vijay pujar

Reputation: 1903

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/)

Upvotes: 1

Mazzy
Mazzy

Reputation: 327

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.

Upvotes: 3

Dharmesh
Dharmesh

Reputation: 221

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

citiesList is id of select tag

Upvotes: 17

Olical
Olical

Reputation: 41452

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);
});

Upvotes: 70

Robin Rizvi
Robin Rizvi

Reputation: 5183

To get the text of the selected option

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

To get the value of the selected option

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

Upvotes: 113

Sukhjeevan
Sukhjeevan

Reputation: 3156

Check it Out-->

For getting text

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

For getting value

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

Upvotes: 5

Xhalent
Xhalent

Reputation: 3954

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());
});

Upvotes: 4

Vivek
Vivek

Reputation: 11028

try this... 

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

Upvotes: 3

alexl
alexl

Reputation: 6851

You can try:

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

Upvotes: 4

Related Questions