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. If you like my tutorials, consider make a donation to these charities.

Comments

avatar
28 Comment threads
3 Thread replies
2 Followers
 
Most reacted comment
Hottest comment thread
26 Comment authors
CodeBlogsvaradhaMarcel VieiraMichael RoseUAN Status Recent comment authors
newest oldest most voted
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

CodeBlogs
Guest
CodeBlogs

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

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

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)

varadha
Guest
varadha

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

Marcel Vieira
Guest
Marcel Vieira

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
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…

Krunal Sabhadiya
Guest
Krunal Sabhadiya

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

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…

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 :/

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

Mohammad Zeeshan Fazal Ali
Guest
Mohammad Zeeshan Fazal Ali

plzz reply

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.