Get the value of selected option using jQuery

Question

I have an array of select field and want to get the value of selected option using jQuery.

Select field is like

<select name="a[]" onchange="getValue(this)">
  <option value="11">11</option>
  <option value="12">12</option>
</select>
<select name="a[]" onchange="getValue(this)">
  <option value="21">21</option>
  <option value="22">22</option>
</select>

and my javascript code is

function getValue(ele) {
  alert(ele.val());
}

But it is not working.

atul · Answer 1 · 2016-09-07T19:43:31.127

<select name="a[]">
  <option value="11">11</option>
  <option value="12">12</option>
</select>
<select name="a[]">
  <option value="21">21</option>
  <option value="22">22</option>
</select>

javascript

$("select").on("change", function (event){
   alert($(this).val());
})

if you dont want to select all the select input list then you can do this also

$("select[name='a\[\]']").on("change", function (event){
       alert($(this).val());
    })

this will only select only select list with name=a[]

Pranav C Balan · Accepted Answer · 2016-09-07T19:48:42.427

The val() is a jQuery method which can't use with DOM object. To get value use value property of the element instead.

function getValue(ele) {
  alert(ele.value);
  // with jQuery it should be
  // alert($(ele).val());
}

function getValue(ele) {
  alert(ele.value);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="a[]" onchange="getValue(this)">
  <option value="11">11</option>
  <option value="12">12</option>
</select>
<select name="a[]" onchange="getValue(this)">
  <option value="21">21</option>
  <option value="22">22</option>
</select>

Since you are tagged jQuery in your question use change() event handler, Inside the change event callback this refers to the corresponding dom object.

// select element with the name  attribute equals 
// selector can be used and then bind event handler
$('[name="a[]"]').change(function() {
  // get the value
  alert(this.value)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="a[]">
  <option value="11">11</option>
  <option value="12">12</option>
</select>
<select name="a[]">
  <option value="21">21</option>
  <option value="22">22</option>
</select>

score 2 · Answer 3 · answered Sep 07 '16 at 19:42

Try this :

$(document).ready(function(){

    $("select").on("change",function(){

        alert($(this).val());


    })
})

Final code :

<!DOCTYPE html>
<html lang="en">
<head>
</head>
    
    <body>
        
        <select name="a[]">
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        <select name="a[]">
          <option value="21">21</option>
          <option value="22">22</option>
        </select>
        
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
        <script>
            
        $(document).ready(function(){

            $("select").on("change",function(){

                alert($(this).val());


            })
        })
    </script>
    </body>
</html>

Get the value of selected option using jQuery

3 Answers3