jQuery Set Selected Option By Text
Last Updated : Mar 11, 2024
IN - jQuery | Written & Updated By - Dikshita
In this article we will show you the solution of jQuery set selected option by text, using jQuery, changing the selected value from such a drop-down list only requires one line of code.
Assume you need to choose one of a select element's alternatives based upon one of its values.
There are many ways to accomplish this accomplishment; two of them are described below.
Used Purpose :-
The val() function sets or returns the specified elements' value attributes. Attributes & values of the chosen elements are set or returned by the attr() method.
jQuery makes it simple to choose the text of any particular option or the text of a selected option using its dedicated selectors.
The specific element is chosen using the selector.
We would set content by applying the exact three techniques as on the previous page:
text() - Changes or retrieves the text content of a set of items
HTML() - Sets or retrieves the content of a number of elements (including HTML markup)
val() sets or retrieves form fields' values.
The callback function is included with each of the three jQuery methods mentioned earlier in this section: text(), html(), and val().
The index of the currently selected item from the list of elements and also the original (old) value are the two inputs for the callback function.
The string you want to use because as new value from of the method is then returned.
Step By Step Guide On jQuery Set Selected Option By Text :-
<html>
<head>
<title>
Get text of specific option tag
</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
TalkersCode
</h1>
<select id='TC_list'>
<option value='TC_1'>TC_A</option>
<option value='TC_2'>TC_B</option>
<option value='TC_3'>TC_C</option>
</select>
<br><br>
<button id="TC_Button" onclick = "getText()">
getText
</button>
<p id = "TC_P" style="color:green;font-size:20px;"></p>
<script>
function getText(){
var el = document.getElementById("TC_P");
el.innerHTML = $("#TC_list option[value='TC_2']").text();
}
</script>
</body>
</html>
- The first step is to write <HTML>, which tells the browser what version of HTML we're using. A tag is the first element of an HTML document.
- Use the <head> tag to describe the project's heading. In contrast to the final brackets, which are closed, the title and final brackets both are open. External style sheets, also known as step-by-step style sheets, appear on a webpage based on the URL or path.
- Next, we create the font size and weight in style.
- Then we style by closing our eyes.
- The <script> tag was then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- The script is then closed.
- The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
- Then we create a list using select and option.
- After that we again opened the <script> tag and then added. The script tag also includes the javascript google API run or an explanation of the code or file we used.
- Then we close program using </script> </body> </html>
Conclusion :-
I hope this article on jQuery set selected option by text helps you and the steps and method mentioned above are easy to follow and implement.
About Dikshita
