Change the Selected Value of a Drop-down List with Jquery

Change the selected value of a drop-down list with jQuery

Dropdown lists, also known as select elements, are commonly used in web forms to allow users to select one option from a list. In some cases, you may need to dynamically change the selected value of a dropdown list using JavaScript or jQuery. In this article, we will explore different ways to achieve this using jQuery.

Method 1: Using the val() method

The val() method in jQuery allows us to get or set the value of form elements, including dropdown lists. To change the selected value of a dropdown list, we can simply use the val() method and pass the desired value as an argument.

$(document).ready(function() {
  // Change the selected value to "option2"
  $('#myDropdown').val('option2');
});

This code snippet selects the dropdown list with the ID “myDropdown” and sets its selected value to “option2”. Make sure to replace “myDropdown” with the actual ID of your dropdown list.

Method 2: Using the prop() method

The prop() method in jQuery allows us to get or set properties of elements. We can use this method to change the selected property of an option in a dropdown list.

$(document).ready(function() {
  // Change the selected value to "option2"
  $('#myDropdown option[value="option2"]').prop('selected', true);
});

This code snippet selects the option with the value “option2” in the dropdown list with the ID “myDropdown” and sets its selected property to true. Again, remember to replace “myDropdown” with the actual ID of your dropdown list.

Method 3: Using the attr() method

The attr() method in jQuery allows us to get or set attributes of elements. We can use this method to change the selected attribute of an option in a dropdown list.

$(document).ready(function() {
  // Change the selected value to "option2"
  $('#myDropdown option[value="option2"]').attr('selected', 'selected');
});

This code snippet selects the option with the value “option2” in the dropdown list with the ID “myDropdown” and sets its selected attribute to “selected”. Once again, replace “myDropdown” with the actual ID of your dropdown list.

These are three different ways to change the selected value of a dropdown list using jQuery. Choose the method that suits your needs and implement it in your JavaScript code.

Remember to include the jQuery library in your HTML file before using any jQuery code. You can either download it and host it locally or use a CDN (Content Delivery Network) to include it from a remote server.

Happy coding!