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.

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

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