How To Set Selected Option In Jquery

by

jQuery is a fast, lightweight JavaScript library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. One common task in web development is working with form elements, like dropdown lists. In this blog post, we will discuss how you can set the selected option in a dropdown list using jQuery.

HTML Structure

Let’s start by creating a simple HTML structure for our dropdown list. We will create a <select> element with some <option> elements inside it.

Here is the HTML structure:

        
        &lt;select id="myDropdown"&gt;
            &lt;option value="1"&gt;Option 1&lt;/option&gt;
            &lt;option value="2"&gt;Option 2&lt;/option&gt;
            &lt;option value="3"&gt;Option 3&lt;/option&gt;
        &lt;/select&gt;
        


jQuery Methods



        Now, let’s discuss different methods to set the selected option in a dropdown list using jQuery. We will use the prop() and val() methods, which are built-in jQuery methods.
    


Method 1: Using prop() Function



        The prop() function is used to get the property value for only the first element in the matched set. It returns undefined for the value of a property that has not been set, or if the matched set has no elements. To set the selected option, you can use the following code:
    


        
        $("#myDropdown").val("2").prop("selected", true);
        



        In this example, we set the selected option to “2” using the val() method, and then we apply the prop() method to set the “selected” property to true.
    


Method 2: Using val() Function



        The val() function can also be used alone to set the selected option in a dropdown list. This method is simpler and more straightforward compared to using the prop() function. Here’s how you can do it:
    


        
        $("#myDropdown").val("2");
        



        In this example, we set the selected option to “2” using the val() method alone. This code will select the option with the value “2” in the dropdown list.
    


Conclusion



        In this blog post, we discussed how to set the selected option in a dropdown list using jQuery. We learned how to use the prop() and val() methods to achieve this. Both methods are effective, but using the val() method alone is simpler and more straightforward. Happy coding!