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>
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/
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/
how do you set the values for list box / select multiple?
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) ?
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…
nice way, you have explained about drop down list and i going to edit some code in my running blog so thanks
nice but how to change a other page dropdown value using button? plz..
plzz reply
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
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..
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.
…duplicates of and …
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.
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…
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.
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
You need to use AJAX to receive the echo value from PHP
Great tutorial!!!
What about disabling another dropdown component, when you choose the option “NO” in the first dropdown element??
Regards
Great one example.
How to change the dropdown list values via jQuery with spring form?
i need your help sir…
Very good tutorial. Really helpful.
Thanks for sharing.
After disable US, i’m click on Select US.. it shows UnitedState..but i want to show msg disabled.. How?
Thanks a lot!
$(“#country”).val(“China”);
this style is outdated after version 1.4
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
.(click) and the alert;() doesnt work on Chrome and other webkit browser :/
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)
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.
You made my day 🙂 thanks a lot 🙂
Very Good Doc for Freshers….!!!
you can get full detail about uan status here