jquery操作下拉框select

╰半橙微兮° 2022-09-22 11:38 319阅读 0赞

Jquery操作select标签选中、更改选中、清空、删除和增加：

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>jquery 测试</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    </head>
    <body>
    <div>
    <select id="select1">
    	<option value="">--请选择--</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="5">5</option>
    </select>
    <input type="button" value="测试选中" id="ceshi" />
    <p>
    <select id="select2">
    	<option value="">--请选择--</option>
    	<option value="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    </select>
    <input type="button" value="清空" id="qingkong" />
    <p>
    <select id="select3">
    	<option value=""  index="0">--请选择--</option>
    	<option value="1" index="1">1</option>
    	<option value="2">2</option>
    	<option value="3">3</option>
    	<option value="4">4</option>
    </select>
    <input type="button" value="删除" id="shanchu" />
    <p>
    <input type="button" value="增加" id="zengjia" />
    <script type="text/javascript">
    $("#ceshi").bind("click",
    	function (){
    		$("#select1 ").get(0).selectedIndex=1; //设置Select索引为1的项选中 
    		alert($("#select1").find("option:selected").text())
    		
    		$("#select1 ").val(2); // 设置Select的Value值为4的项选中 
    		alert($("#select1").find("option:selected").text())
    		
    		//设置Select的Text值为jQuery的项选中 
    		var street = '3';
    		$('#select1 option:contains(' + street + ')').each(function(){
    		  if ($(this).text() == street) {
    			 $(this).attr('selected', true);
    		  }
    		});
    		alert($("#select1").find("option:selected").text())
    		
    		$("#select1").find("option:contains('2')").attr('selected', true);
    		alert($("#select1").find("option:selected").text())
    		
    		alert($("#select1 option:contains('5')").text())
    		
    		var checkText=$("#select1").find("option:selected").text(); //获取Select选择的Text 
    		var checkValue=$("#select1").val(); //获取Select选择的Value 
    		var checkIndex=$("#select1 ").get(0).selectedIndex; //获取Select选择的索引值 
    		var maxIndex=$("#select1").find("option:last").index(); //获取Select最大的索引值 
    		alert("选中的value"+checkValue)
    		alert("选中的text"+checkText)
    		alert("选中的索引"+checkIndex)
    		alert("索引最大值"+maxIndex)
    	})
    	
    $("#qingkong").bind("click",
    	function (){
    	alert("清空")
    	$("#select2").empty(); 
    
    	})
    $("#shanchu").bind("click",
    	function (){
    	alert("删除")
    	$("#select3").find("option:last").remove(); //删除Select中索引值最大Option(最后一个) 
    	
    	$("#select3").find("option[index='0']").remove(); //删除Select中索引值为0的Option(第一个) 需要在option标签上加上index="0"
    
    	$("#select3").find("option[value='3']").remove(); //删除Select中Value='3'的Option 
    	
    	})
    $("#zengjia").bind("click",
    	function (){
    	alert("增加")
    	$("#select2").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项) 
    	
    	$("#select2").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置) 
    
    	$("#select2 ").get(0).selectedIndex=0;
    	})
    </script>
    
    </body>
    </html>

附源代码下载链接： [源代码][Link 1]。

解压后用浏览器打开即可。

[Link 1]: http://download.csdn.net/detail/a491857321/9562070