Get selected value of dropdown in jQuery on change

To get the selected value of a dropdown using jQuery on change, you may use the change() method.

Demo : get selected value in jQuery.
<select id="my-element">
  <option>Drop down 1</option>
  <option>Drop down 2</option>
  <option>Drop down 3</option>
  <option>Drop down 4</option>
</select>
<script>
$('#my-element').change(function(){
  let myValue = $(this).val()
  alert(myValue)
})
</script>
Try it Yourself »
  1. First, create a select element with four options and an id. So that, you can target the select element with that id.
    <select id="my-element">
      <option>Drop down 1</option>
      <option>Drop down 2</option>
      <option>Drop down 3</option>
      <option>Drop down 4</option>
    </select>
  2. Now select the element and add the change() method. The change() method runs a function when a change event occurs. For select menus, the change event occurs when an option is selected.
    $('#my-element').change(function(){
      
    })
  3. Then , inside the function, store the selected value to a variable.
    $('#my-element').change(function(){
      let myValue = $(this).val();
    })
  4. Finally, display the value using the alert() method.
    $('#my-element').change(function(){
      let myValue = $(this).val();
      alert(myValue);
    })