CODEWITHSUNDEEP
jqueryevents
Zulakis
Zulakis

Reputation: 8394

jQuery select change event get selected option

I bound an event on the change event of my select elements with this:

$('select').on('change', '', function (e) {

});

How can I access the element which got selected when the change event occurs?

Upvotes: 288

Views: 698032

Answers (9)

Naftali
Naftali

Reputation: 146350

$('select').on('change', function (e) {
    var optionSelected = $("option:selected", this);
    var valueSelected = this.value;
    ....
});

Upvotes: 564

mickySimons
mickySimons

Reputation: 51

This can also work fine

(function(jQuery) {
  $(document).ready(function() {
    $("#select_menu").change(function() {
      var selectedOption = $("#select_menu").val()
    });
  });
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

Upvotes: 3

alex Roosso
alex Roosso

Reputation: 121

See official API documentation https://api.jquery.com/selected-selector/

This good works:

$( "select" ).on('change',function() {
  var str = "";
  // For multiple choice
  $( "select option:selected" ).each(function() {
    str += $( this ).val() + " "; 
  });
});

and

$( "select" ).on('change',function() {
  // For unique choice
  var selVal = $( "select option:selected" ).val(); 
});

and be easy for unique choice

var SelVal = $( "#idSelect option:selected" ).val();

Upvotes: 2

Serdar Karaca
Serdar Karaca

Reputation: 143

$('#_SelectID').change(function () {
        var SelectedText = $('option:selected',this).text();
        var SelectedValue = $('option:selected',this).val();
});

Upvotes: 5

Recep Can
Recep Can

Reputation: 131

Another and short way to get value of selected value, 

$('#selectElement').on('change',function(){
   var selectedVal = $(this).val();
                       ^^^^  ^^^^ -> presents #selectElement selected value 
                         |
                         v
               presents #selectElement, 
});

Upvotes: 3

user6270989
user6270989

Reputation: 

<select id="selectId">
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
</select>


$('#selectId').on('change', function () {
     var selectVal = $("#selectId option:selected").val();
});

First create a select option. After that using jquery you can get current selected value when user change select option value.

Upvotes: 13

Bellash
Bellash

Reputation: 8204

You can use the jQuery find method

 $('select').change(function () {
     var optionSelected = $(this).find("option:selected");
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
 });

The above solution works perfectly but I choose to add the following code for them willing to get the clicked option. It allows you get the selected option even when this select value has not changed. (Tested with Mozilla only)

    $('select').find('option').click(function () {
     var optionSelected = $(this);
     var valueSelected  = optionSelected.val();
     var textSelected   = optionSelected.text();
   });

Upvotes: 94

DanielST
DanielST

Reputation: 14163

Delegated Alternative

In case anyone is using the delegated approach for their listener, use e.target (it will refer to the select element).

$('#myform').on('change', 'select', function (e) {
    var val = $(e.target).val();
    var text = $(e.target).find("option:selected").text(); //only time the find is required
    var name = $(e.target).attr('name');
}

JSFiddle Demo

Upvotes: 21

tozlu
tozlu

Reputation: 4865

I find this shorter and cleaner. Besides, you can iterate through selected items if there are more than one;

$('select').on('change', function () {
     var selectedValue = this.selectedOptions[0].value;
     var selectedText  = this.selectedOptions[0].text;
});

Upvotes: 7

Related Questions