All TalkersCode Topics

Follow TalkersCode On Social Media - A Social Media Network for developers Join Now ➔

jQuery Set Selected Option By Value

Last Updated : Mar 11, 2024

jQuery Set Selected Option By Value

In this article we will show you the solution of jQuery set selected option by value, one line of code may easily be written using jQuery to modify a selected value from just a drop-down list.

Assume you need to choose one of a select element's alternatives based on a single of its values.

There are many ways to accomplish this accomplishment two of them are described below.

Used Purpose:

  • The val() function returns the specified elements' value attributes.
  • Attributes & values of the chosen elements are set or returned by the attr() function.

To locate the value of the selected item in a pick box or dropdown list, combine the val() function and the jQuery:selected selection.

A text content of a <option> element would be utilized as either a value instead if value for with an option also isn't expressly defined, as shown.

Step By Step Guide On jQuery Set Selected Option By Value :-

<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <title>jQuery get selected option</title>
  div {
    color: red;
<script src=""></script>
 <select id="select_id" name="actors">
  <option selected="selected">Java</option>
<div id="location"></div>
 $('#select_id').on('change', function() {
  1. First, we need to write <HTML>, which tells the browser what version of HTML we're using. An HTML document begins with a tag.
  2. You should use the <head> tag to describe the project's heading. While the final brackets are closed, both the title and the final brackets are open. A webpage's URL or path determines the appearance of external style sheets, also called step-by-step style sheets.
  3. The next step is to create the font size and weight.
  4. After that, we close the style.
  5. 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.
  6. Closing the script completes the process.
  7. The <body> tag, which describes the webpage's body, is then placed after this. This is where the website's content is written.
  8. Then we create a select and option function.
  9. Then again we open the <script> tag and then add. The script tag also includes the javascript google API run or an explanation of the code or file we used.
  10. After that we close </script></body></html>

Conclusion :-

The attribute that was selected is a boolean one. When specified, it tells the browser to pre-select a choice before the page loads.

The drop-down list's first item to appear is the pre-selected choice.

By combining the id, name, class, and tag of particular html elements with the jQuery change() method, you may set the selected value of a dropdown menu in jQuery.

I hope this article on jQuery set selected option by value helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Dikshita

Passionate Electronics and Communication Engineering student with expertise in web development (HTML, CSS, JS,PHP, Bootstrap, React.js) and content writing. Eager problem solver and tech enthusiast, adept at creating engaging web experiences.

Follow Dikshita On Linkedin 🡪