Set and get selected value of dropdown in jquery by id, name, class; In this tutorial, you will learn how to set & get selected value of dropdown in jquery by name, text, class, value, and tag with selected html elements.
Dropdowns or select boxes are commonly used in web applications for allowing users to select from a list of options. Sometimes, it may be necessary to set the selected value of a dropdown using jQuery.
Set & Get Selected Value of Dropdown in jQuery by id, name, class & tag
Using the jQuery change() method; you can set the selected value of dropdown in jquery by using id, name, text, class, value, and tag with selected html elements; see the following example for that:
- Example 1:- Set selected value of dropdown in jquery by id
- Example 2:- Set selected value of dropdown in jquery by Name
- Example 3:- Set selected value of dropdown in jquery by Class
- Example 4:- Set selected value of dropdown in jquery by Text
- Example 5:- Set selected value of dropdown in jquery by Attribute
Before setting the value of the dropdown in jQuery, you need to know that the value of the selected dropdown is obtained. For this have taken a simple example which is as follows:
$('select').on('change', function() {
alert( this.value );
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery get the selected dropdown value on change</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<select id="select_id" name="actors">
<option>Test</option>
<option selected="selected">Java</option>
<option>Python</option>
<option>Ruby</option>
<option>PHP</option>
<option>Jquery</option>
</select>
<div id="location"></div>
<script>
$('#select_id').on('change', function() {
$('#location').text(this.value);
});
</script>
</body>
</html>
Example 1:- Set selected value of dropdown in jquery by id
Let’s see the following example of jquery set selected option value by id; as shown below:
$(document).ready(function() {
$("#myDropdown").val("Option2");
});
In the above code, the $(document).ready() method is used to make sure that the DOM is fully loaded before the script is executed. The $("#myDropdown") selector is used to select the dropdown element with the ID myDropdown. The .val() method is used to set the value of the selected option to "Option2".
Example 2:- Set selected value of dropdown in jquery by Name
To set the selected value of a dropdown by its name using jQuery, you can use the attribute selector with the name attribute. Here’s the code:
$(document).ready(function() {
$("select[name='myDropdown']").val("Option2");
});
In the above code, the $(document).ready() method is used to make sure that the DOM is fully loaded before the script is executed. The $("select[name='myDropdown']") selector is used to select the dropdown element with the name myDropdown. The .val() method is used to set the value of the selected option to "Option2".
Example 3:- Set selected value of dropdown in jquery by Class
To set the selected value of a dropdown by its class using jQuery, you can use the class selector with the . character. Here’s the code:
$(document).ready(function() {
$(".myDropdownClass").val("Option2");
});
In the above code, the $(document).ready() method is used to make sure that the DOM is fully loaded before the script is executed. The $(".myDropdownClass") selector is used to select the dropdown element with the class myDropdownClass. The .val() method is used to set the value of the selected option to "Option2".
Example 4:- Set selected value of dropdown in jquery by Text
To set the selected value of a dropdown by its text using jQuery, you can use the .filter() method. Here’s the code:
$(document).ready(function() {
$("#myDropdown option").filter(function() {
return $(this).text() === "Option2";
}).attr("selected", true);
});
In the above code, the $(document).ready() method is used to make sure that the DOM is fully loaded before the script is executed. The $("#myDropdown option") selector is used to select all the options in the dropdown with the ID myDropdown. The .filter() method is used to select the option with the text "Option2". The .attr() method is used to set the selected attribute of the option to true, which will make it the selected option.
Example 5:- Set selected value of dropdown in jquery by Attribute
To set the selected value of a dropdown by its attribute using jQuery, you can use the attribute selector with the [] characters. Here’s the code:
$(document).ready(function() {
$("select[data-id='myDropdown']").val("Option2");
});
Conclusion
In conclusion, setting the selected value of a dropdown using jQuery is a simple and straightforward process. By using various selectors like ID, name, class, text, attribute, and tag, you can easily set the selected value of a dropdown according to your requirements. It is important to keep in mind that you should use the appropriate selector for the dropdown element you want to target to ensure that the value is set correctly. With these techniques, you can enhance the functionality of your web application by making it easier for users to select from dropdown menus.
