In this article we will show you the solution of jQuery set selected option, using one of its values, you must choose a choose element's option from among its list of possible choices.
Here, you may utilise the selected selector in conjunction with the val() function to locate the value of the selected option in a drop-down list.
The selected elements' value attribute is returned or set using the jQuery val() function.
A val() method of jQuery can be used to mark the option as selected. Now move to the concept of jquery set selected option.
Step By Step Guide On jQuery Set Selected Option :-
One of jQuery's built-in methods is called val(). In essence, the val() method can return the element's value in addition to setting the value property of any supplied elements.
By defining the value attribute in advance using this way, we can select the option in this case.
Syntax:
$('selector').val('value');
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>jquery set selected option</title>
</head>
<body>
<h2>Set Select Option 'Selected' By Value </h2>
<label>WeekDays </label>
<select id="mySelect">
<option>--Select--</option>
<option value="one">Monday</option>
<option value="two">Tuesday</option>
<option value="three">Wednesday</option>
<option value="four">Thursday</option>
<option value="five">Friday</option>
<option value="six">Saturday</option>
<option value="seven">Sunday</option>
</select>
<button type="button" id="button1" style="margin-left: 60px;">Select Sunday</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('#button1').on('click',function(){
$('#mySelect').val('seven');
});
});
</script>
</html>
- Our code begins with HTML and HEAD tags.
- Next, we employ the meta tag, which is the element that describes the metadata for an HTML content.
- Then, after importing the jQuery library, we link to the standard jQuery library on Google CDN by specifying the address of Google CDN in the script tag's src attribute.
- After that, the webpage's title is added using the TITLE tag. This title, which can only be text, is displayed inside the browser's title bar or the page's tab.
- Next, we begin the body of our code, which implies that this is where the real code that appears on the web page starts.
- With the H2 tag, we create a heading in the body that contains some text.
- Next, we build the label tag, which is required to highlight what the field on the form you are generating and ultimately displaying represents.
- Then, using the SELECT and OPTION VALUE tags, we build the drop-down list. We also offer an ID for you to choose from.
- Using the BUTTON element, we next create a button with an id and a style.
- After that, we finish writing our body of code and start our jQuery script.
- Under this case, the ready() method, that is used to makes a function accessible after the document has loaded, is utilised.
- Next, we simulate a mouse click on to an element by using the click() method for buttons. Click() activates the element's click event when used with supported elements.
- Afterwards, we employ the val() method, a built-in jQuery function, to retrieve or modify the value of the attributes for the chosen elements.
- Finally, we add HTML & SCRIPT elements to finish our code.
Conclusion :-
As a result, we have successfully acquired knowledge of the jQuery set selected option.
The val() function, which finds the value of the currently selected item in a drop-down list, was another thing we learned.
With the jQuery val() function, the value attribute of the selected items is either returned or set.
The option can be selected by using the val() method of the jQuery library.
I hope this article on jQuery set selected option helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
