Jquery 操作下拉列表select的值，文本，索引等

最新推荐文章于 2021-10-19 09:19:55 发布

原创最新推荐文章于 2021-10-19 09:19:55 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍使用JavaScript操作HTML中的下拉列表元素，包括修改选中项、获取选中值及索引、追加和删除选项等，并展示了根据不同城市选项动态更新区域列表的例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML页面结构

<div id="msg"></div>
城市
<select name="city" size="1" id="city">
  <option value="1">上海</option>
  <option value="2">北京</option>
  <option value="3"  selected="selected">杭州</option>
</select>
区域：
<select name="area" size="1" id="area">
</select>

<script type="text/javascript">
   $(function(){
	   
		   //(5)修改下拉列表选中项--->是错误的写法
		   // $("#city option[text='上海']").attr("selected", true);
		  
		   //应改为：
		   $("#city option:eq(0)").attr("selected", true);     (//$("#city")[0].selectedIndex = 0;)
		  
	   
	   //select1 值改变事件
	   $("#city").change(function(){
		   
		   //1)获得下拉列表的值value
		   $("#msg").html($(this).val());
		   
		   
		    //2)获取Select选择的索引值
			 $("#msg").html($(this).get(0).selectedIndex);
		
			// $("#msg").html($(this).find("option:selected").index());
			
			
		   //(3)获得下拉列表的所有文本text
		    $("#msg").html($(this).text());
			
			
			//4)获得下拉列表选择文本text
			$("#msg").html($(this).find("option:selected").text());
			
		  
		  //6)Select追加一个Option(下拉项)
		  $("#city").append("<option value='天津'>天津</option>");  
		  
		  //7)删除Select中索引值最大Option(最后一个)
		  $("#city option:last").remove();  
		 
		 //8)下拉列表的个数
		   alert($("#city").find("option").length);

	  
		
		 //清空第二个下列列表
		 $("#area").empty();
		 
	     //判断
	     if($(this).find("option:selected").text()=="上海"){
			 
			//添加第二个下列列表
			$("#area").append("<option value='11'>11</option>")
			.append("<option value='12'>12</option>").append("<option value='13'>13</option>");
			 
		 }else if($(this).find("option:selected").text()=="北京"){
			$("#area").append("<option value='111'>111</option>")
			.append("<option value='112'>112</option>").append("<option value='113'>113</option>");
		 }
	   
	   });
	   
  });
</script>

效果

1）运行时