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 the Author

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

Comments

Leave a Reply

avatar
newest oldest most voted
Michael Rose
Guest
Michael Rose

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…

ashu
Guest
ashu

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

Krunal Sabhadiya
Guest
Krunal Sabhadiya

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

Mohammad Zeeshan Fazal Ali
Guest
Mohammad Zeeshan Fazal Ali

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

Mohammad Zeeshan Fazal Ali
Guest
Mohammad Zeeshan Fazal Ali

plzz reply

Wazirpur
Guest
Wazirpur

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
Guest
John Collett

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
Guest
John Collett

…duplicates of and …

John Collett
Guest
John Collett

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
Guest
Rahul

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…

Nehru Place
Guest
Nehru Place

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.

PK
Guest
PK

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
Guest
Frank

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

wladdy
Guest
wladdy

Great tutorial!!!

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

Regards

Vijay
Guest
Vijay

Great one example.

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

i need your help sir…

Monu
Guest
Monu

Very good tutorial. Really helpful.
Thanks for sharing.

satish
Guest
satish

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

silaco gilpansa
Guest
silaco gilpansa

Thanks a lot!

micky
Guest
micky

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

this style is outdated after version 1.4

trackback
jQuery form selectors example

[…] More details… […]

Jimi
Guest
Jimi

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
Guest
Riri

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

Manny
Guest
Manny

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)

Ad
Guest
Ad

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
Guest
Manoj

You made my day :) thanks a lot :)

Vijay
Guest
Vijay

Very Good Doc for Freshers….!!!

UAN Status
Guest
UAN Status

you can get full detail about uan status here