Main Tutorials

How to set a dropdown box value in jQuery

A simple select / drop down box, with a id=”country”.


<select id="country">
   <option value="None">-- Select --</option>
   <option value="China">China</option>
   <option value="United State">United State</option>
   <option value="Malaysia">Malaysia</option>
</select>

1. To display the selected drop down box value.


$('#country').val();

2. To set a drop down box value to ‘China’.


$("#country").val("China");

3. To set a drop down box value to ‘United State’.


$("#country").val("United State");

4. To set a drop down box value to ‘Malaysia’.


$("#country").val("Malaysia");

5. To disable the ‘United State’ option in drop down box.


$("#country option[value='United State']").attr("disabled", true);

6. To enable the ‘United State’ option in drop down box.


$("#country option[value='United State']").attr("disabled", false);

jQuery select / drop down box example


<html>
<head>
<title>jQuery select / dropdown box example</title>
 
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

</head>

<body>

<h1>jQuery select / dropdown box example</h1>

<script type="text/javascript">

  $(document).ready(function(){

    $("#isSelect").click(function () {
		
	alert($('#country').val());
			
    });
	
    $("#selectChina").click(function () {
		
	$("#country").val("China");
		
    });
	
    $("#selectUS").click(function () {
		
	$("#country").val("United State");
			
    });
	
    $("#selectMalaysia").click(function () {
		
	$("#country").val("Malaysia");

    });
	
    $("#disableUS").click(function () {
		
	$("#country option[value='United State']").attr("disabled", true);
		
    });
	
    $("#enableUS").click(function () {
		
	$("#country option[value='United State']").attr("disabled", false);
		
    });
	
  });
</script>
</head><body>

<select id="country">
<option value="None">-- Select --</option>
<option value="China">China</option>
<option value="United State">United State</option>
<option value="Malaysia">Malaysia</option>
</select>

<br/>
<br/>
<br/>

<input type='button' value='Display Selected' id='isSelect'>
<input type='button' value='Select China' id='selectChina'>
<input type='button' value='Select US' id='selectUS'>
<input type='button' value='Select Malaysia' id='selectMalaysia'>
<input type='button' value='Disable US' id='disableUS'>
<input type='button' value='Enable US' id='enableUS'>
</body>
</html>

About Author

author image
Founder of Mkyong.com, love Java and open source stuff. Follow him on Twitter. If you like my tutorials, consider make a donation to these charities.

Comments

Subscribe
Notify of
30 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments
CodeBlogs
4 years ago

Two of the possible scenarios can be:
1. You want to set a specific option that you already know as selected
https://bugs.code.blog/2019/03/31/setting-selected-value-of-a-dropdownlist-using-jquery/
2. You have to find an option by it’s text and set it as selected
https://bugs.code.blog/2019/04/05/find-a-value-of-dropdown-by-text-and-set-it-as-selected-value-in-jquery/

CodeBlogs
4 years ago
Reply to  CodeBlogs

3. If you want to set the selected option as empty, try this:
https://bugs.code.blog/2019/03/27/set-selected-value-as-empty-for-dropdownlist-via-jquery/

ashu
6 years ago

nice way, you have explained about drop down list and i going to edit some code in my running blog so thanks

Mohammad Zeeshan Fazal Ali
9 years ago

i need help
i have two dropdown menus 1)select city 2)select route numbers when i click on button submit then i shows all the routes of that city
how it is possible

Nehru Place
10 years ago

Thanks MKYong for this helpful article, it really made me understand about dropdown menu. It is looking so simple to work on it now. Thanks a lot.

Manny
11 years ago

Hey man , thanks so much this saved my bacon today. building a clients site. thanks for sharing. example where used http://arrowheadproperties.co.za/arrowhead/ (the map of south africa)

varadha
5 years ago

how do you set the values for list box / select multiple?

Marcel Vieira
5 years ago

Great article, very simple to understand, direct to the point! Thank you.

I’m trying to do something similar as this Post, I mean, using JQuery to set a value in a SelectCheckboxMenu Primefaces web component.

I’ve researched a lot and get to the following working code:

The above code works for a column with no dropdown box.

Please, does anyone knows how to set the value using SelectCheckboxMenu (which ‘is’ a drop down box) ?

Michael Rose
6 years ago

Job Well Done!!! Very well written and great solution. Thank you for this information you are a good person for sharing your knowledge and explain where most fail! Microsoft can take a thing or two from you…

Krunal Sabhadiya
6 years ago

nice but how to change a other page dropdown value using button? plz..

Wazirpur
10 years ago

It was really a nice topic on drop-down menus, it was not so easy to understand the drop down menus before… Thanks a ton..

John Collett
10 years ago

duplicates of </head> <body>

And I am slowly learning the limitations of this method of sending messages. I am trying to say head and body.

John Collett
10 years ago

…duplicates of and …

John Collett
10 years ago

So far I have been loving this series of tutorials. Now I am beginning to get a bit tired of having to remove duplicates of “” and “”, and other less trivial adjustments to get them to work. That’s very disappointing.

Rahul
10 years ago

Hi,
My requirement is to change the other dropdown to a list of dropdown values.
eg: list1 contains Sports (Cricket, Football, Basketball);
list2 contains players of respective sports([Sachin,Ricky,Andrew],[Messi,Nistelrooy,Neymar,Xavi,Torres], [Jordan,Alex])..
Suppose I select Football then only the names football players should be displayed in other list…
Please guide me with the Javascript/Jquery code…

PK
10 years ago

What if id is a php variable like id= . How to use $index in jquery function. I tried like: $(‘select#’).change(function(){ but it did not work

Frank
8 years ago
Reply to  PK

You need to use AJAX to receive the echo value from PHP

wladdy
10 years ago

Great tutorial!!!

What about disabling another dropdown component, when you choose the option “NO” in the first dropdown element??

Regards

Vijay
11 years ago

Great one example.

How to change the dropdown list values via jQuery with spring form?

i need your help sir…

Monu
11 years ago

Very good tutorial. Really helpful.
Thanks for sharing.

satish
11 years ago

After disable US, i’m click on Select US.. it shows UnitedState..but i want to show msg disabled.. How?

silaco gilpansa
11 years ago

Thanks a lot!

micky
11 years ago

$(“#country”).val(“China”);

this style is outdated after version 1.4

Jimi
11 years ago

Thanks for the insight, it is very helpful. expect more of this from you. pls i also need practical and helpful knowledge on advance drop down menu list. thanks

Riri
11 years ago

.(click) and the alert;() doesnt work on Chrome and other webkit browser :/

Ad
11 years ago

Hi mkyong,

Your examples are great!

How to change the dropdown list values via jQuery?

example:

Malaysia to Canada?

Your help would be very much appreciated.

Manoj
12 years ago

You made my day 🙂 thanks a lot 🙂

Vijay
13 years ago

Very Good Doc for Freshers….!!!

UAN Status
6 years ago
Reply to  Vijay

you can get full detail about uan status here

Mohammad Zeeshan Fazal Ali
9 years ago

plzz reply