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

About the Author

mkyong
Founder of Mkyong.com and HostingCompass.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

  • Pingback: house blue()

  • Pingback: zak?ad szklarski piotrków trybunalski()

  • Pingback: paypal loans()

  • Pingback: locksmith r.a. the rugged man()

  • Pingback: electrician hourly wage ontario()

  • Pingback: stop parking()

  • Pingback: water ionizer loan()

  • Pingback: pay day loans()

  • Pingback: car parking()

  • Pingback: laan penge nu og her()

  • Pingback: alkaline water machine()

  • Pingback: laan penge nu sms()

  • Pingback: fue.mobi()

  • Pingback: check out DIRECTV channels()

  • Pingback: best online casinos()

  • Pingback: unblock viber and skype()

  • Pingback: kangen water()

  • Pingback: kangen water()

  • Pingback: alkaline water()

  • Pingback: water ionizer()

  • Pingback: watch movies online free()

  • Pingback: watch movies online free()

  • Pingback: watch free movies online()

  • Pingback: Blue Coaster33()

  • http://www.wazirpurmarket.com 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

    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

    …duplicates of and …

  • 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

    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…

  • http://www.nehruplacemarket.com 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

    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

  • wladdy

    Great tutorial!!!

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

    Regards

  • Vijay

    Great one example.

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

    i need your help sir…

  • Monu

    Very good tutorial. Really helpful.
    Thanks for sharing.

  • satish

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

  • silaco gilpansa

    Thanks a lot!

  • micky

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

    this style is outdated after version 1.4

  • Pingback: jQuery form selectors example()

  • http://www.dcmediaservices.com 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

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

  • http://www.themwebs.me 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

    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.

  • http://json.url Manoj

    You made my day :) thanks a lot :)

  • Vijay

    Very Good Doc for Freshers….!!!