jQuery chosen select value using jQuery

jQuery chosen is the best library for maintaining the HTML select dropdown. jQuery select box is developer friendly and user-friendly library. The developer can easily customize the design as he/she want. You can get more detail from here.

Let’s how we can change the chosen dropdown value using jQuery. Normally we can change the Dropdown value like.

$(document).ready(function(){
    $("#elementId").val('option_value');
});

When we want to select the dropdown value using jQuery. We used “val” function to select the value or change the value of the dropdown.

But it’s not working with chosen. When used chosen for our dropdown the “val” function is not update or select the option because the chosen is not update. After changing the dropdown value using jQuery we need to tell the chosen for updating the selected option.

Let’s see the example of for change the chosen dropdown value using jQuery.


<p>
	<label>Select Option</label>
	<select class="chosen-select" id="chosenId">
		<option value="">Select Option</option>
		<option value="first">First Option</option>
		<option value="second">Second Option</option>
		<option value="third">Third Option</option>
		<option value="four">Four Option</option>
		<option value="five">Five Option</option>
	</select>
</p>

Let’s write the jQuery for the chosen dropdown.


    $(document).ready(function(){
        $(".chosen-select").chosen();
    });

Now let’s update the chosen dropdown value using jQuery.

$("#chosenId").val('second').trigger("chosen:updated");

It’s too easy to change the chosen value using jQuery.

If you face any issue with changing the value of the chosen please write the comment below.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s