欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

jQuery之select

程序员文章站 2022-06-10 09:50:10
...
话不多说,详见代码吧
网页代码
<div style="width:400px;height:100%;border: 1px black solid;background: white;margin-left: 30%;margin-top: 15%;padding-left:20px;padding-top:20px;">
<h1>Select示例</h1>
<select id="address">
	<option value="00">北京</option>
	<option value="01">成都</option>
	<option value="02">昆明</option>	
</select>
<br>
<input type="button" id="test1" value="设置下标: 1 被选中"/><br>
<input type="button" id="test2" value="设置文本: 成都 被选中"/><br>
<input type="button" id="test3" value="获取选中的下标"/><br>
<input type="button" id="test4" value="获取选中的值"/><br>
<input type="button" id="test5" value="获取选中的文本"/><br>
<input type="button" id="test6" value="获取最大索引值"/><br>
<input type="button" id="test7" value="获取下标02选中"/><br>
<input type="button" id="test8" value="添加到最后一个option项:03-青海"/><br>
<input type="button" id="test9" value="添加到最前一个option项:05-云南"/><br>
<input type="button" id="test10" value="删除到最前一个option项:云南"/><br>
<input type="button" id="test11" value="删除到最后一个option项:青海"/><br>
<input type="button" id="test12" value="删除value=03的青海option"/><br>
<input type="button" id="test13" value="删除文本=云南的option"/><br>
<p><a href="index.jsp">返回</a></p>
</div>

<script src="../scripts/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" >

$(function(){ 

	  $("#test1").click(function(){
	  	  $("#address ").get(0).selectedIndex = 1;  	 	  	 
	  });
	  
	  $("#test2").click(function(){  
	      $("#address>option").each(function(index){
	      	  if(this.text == "成都"){
	      	  	 this.selected = true;
	      	  }
	      });
	  });
	  
	  $("#test3").click(function(){
	  	 alert($("#address").get(0).selectedIndex);
	  });
	  
	   $("#test4").click(function(){
	  	 //alert($("#address").find("option:selected").val());
	  	 alert($("#address").val());
	  });
	  
	   $("#test5").click(function(){
	  	 //alert($("#address").find("option:selected").text());  	  
	  	 alert($("#address>option:selected").text());
	  });
	  
	   $("#test6").click(function(){
	  	   //alert($("#address>option:last")[0].index);
	  	   alert($("#address>option:last").index());
	  });
	  
	  $("#test7").click(function(){	  	  
	  	  $("#address>option").each(function(index){
	      	  if(this.value == "02"){
	      	  	 this.selected = true;
	      	  }
	      });
	  });
	  
	   $("#test8").click(function(){
	  	  $("#address").append("<option value='03'>青海</option>");
	  	  $("#address").get(0).selectedIndex =$("#address>option").length-1; 	  	  
	  });
	  
	   $("#test9").click(function(){
	  	  $("#address").prepend("<option value='05'>云南</option>");
	  	  $("#address").get(0).selectedIndex = 0; 	  	  
	  });
	  
	  $("#test10").click(function(){	
	      var firstIndex=$("#address>option:first").index();  
	     // alert("firstIndex: " + firstIndex);	 
	      $("#address>option[index=0]").remove();  
	  	  //$("#address>option:first").remove();  //删除Select中索引值为0的 Option(第一个) 
	  	  	  
	  });
	  
	  $("#test11").click(function(){
	    var maxIndex = $("#address>option:last").index();
	  	 $("#address>option[index="+maxIndex+"]").remove();
	  	// $("#address>option:last").remove();  //删除Select中索引值最大Option(最 后一个) 
	  	  	  
	  });
	  
	   $("#test12").click(function(){
	  	 // $("#address>option[value='03']").remove();	  	  	  
	  	  $("#address option:[value='03']").remove();
	  });
	  
	   $("#test13").click(function(){	     
	  	   $("#address>option:[text='云南']").remove();	  	  
	  	   //删除所有子项
	  	  //$("#address>option").remove();	  	   
	  });	  
})  
</script>
相关标签: jquery select