如何在jQuery中设置下拉框值

最新推荐文章于 2026-05-12 05:20:12 发布

翻译最新推荐文章于 2026-05-12 05:20:12 发布 · 3k 阅读

本文详细介绍如何使用jQuery操作下拉框元素，包括获取和设置选中值、禁用及启用选项。通过实例代码，展示如何响应用户点击事件来改变下拉框状态。

一个简单的选择/下拉框，其ID为“国家/地区”。

<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.显示选定的下拉框值。

$('#country').val();

2.将下拉框的值设置为“中国”。

$("#country").val("China");

3.将下拉框值设置为“美国”。

$("#country").val("United State");

4.将下拉框值设置为“马来西亚”。

$("#country").val("Malaysia");

5.要在下拉框中禁用“美国”选项。

$("#country option[value='United State']").attr("disabled", true);

6.要在下拉框中启用“美国”选项。

$("#country option[value='United State']").attr("disabled", false);

jQuery选择/下拉框示例

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