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 :
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 making a donation to this charity, thanks.

Related Posts

Popular Posts