Get selected item from select menu in jQuery/jQuery Mobile?

Question

I have a jQuery Mobile code like this:

<select name="selectmenu1" id="selectmenu1">
                        <option value="o1">
                           a
                        </option>
                        <option value="o2">
                            b
                        </option>
                        <option value="o3">
                            c
                        </option>
                        <option value="o4">
                            d
                        </option>
                    </select>

Now I want to get the selected value after the user changed the selection.

How to do this with jQuery?

alex · Accepted Answer · 2013-02-03T03:14:27.433

18

It's very simple...

$("#selectmenu1").change(function() {
    var selected = $(this).val(); // or this.value
});

jsFiddle.

If you wanted the selected element's text node(s), use this instead...

$("#selectmenu1").change(function() {
    var selected = $(this).find(":selected").text();
});

jsFiddle.

edited Feb 03 '13 at 03:14

answered May 16 '12 at 06:49

alex

479,566
201
878
984

so $(this) selects the last selected element? – gurehbgui May 16 '12 at 06:52
1

@gurehbgui http://stackoverflow.com/questions/7389944/this-vs-this-in-jquery $(this) means current object . – Ravi Gadag May 16 '12 at 07:07
Please, please, `$(this).val()` => `this.value` :). thank you! – gdoron May 16 '12 at 13:57

score 1 · Answer 2 · answered May 16 '12 at 06:50

1

$('#selectmenu1').on('change', function(){
     alert( this.value );
});

answered May 16 '12 at 06:50

Engineer

47,849
12
88
91

score 1 · Answer 3 · answered Aug 25 '15 at 09:22

Here is the right answer for Jquery Mobile device .

$(document).bind( "change",'#selectmenu1', function(event, ui) {
    alert($( '#selectmenu1' ).val());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
 
    
    
<select name="selectmenu1" id="selectmenu1">
  <option value="o1">
    a
  </option>
  <option value="o2">
    b
  </option>
  <option value="o3">
    c
  </option>
  <option value="o4">
    d
  </option>
</select>

score -1 · Answer 4 · answered May 16 '12 at 06:58

http://jsfiddle.net/ipsjolly/5RaDB/

<select name="selectmenu1" id="selectmenu1">
                    <option value="o1">
                       a
                    </option>
                    <option value="o2">
                        b
                    </option>
                    <option value="o3">
                        c
                    </option>
                    <option value="o4">
                        d
                    </option>
</select>

<div id="getval" ></div>


<script>
 function displayVals() {
       var singleValues = $("select").val();
      $("#getval").html(singleValues);
  }
  $('#selectmenu1').change(function() {
      displayVals();
  });
</script>

score -1 · Answer 5 · answered May 16 '12 at 07:06

try this.. this is the simplest way..

  <select name="selectmenu1" id="selectmenu1" onchange="selectvalue(this.value)>
                        <option value="o1">
                           a
                        </option>
                        <option value="o2">
                            b
                        </option>
                        <option value="o3">
                            c
                        </option>
                        <option value="o4">
                            d
                        </option>
                    </select>

On JavaScript side code is ..

function selectvalue(value){

alert(value);

}

Get selected item from select menu in jQuery/jQuery Mobile?

5 Answers5