option的添加删除与选中

雨点打透心脏的1/2处 2022-06-13 01:29 212阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>option的添加删除与选中</title>
    		<style type="text/css">
    			#demo{
    				width: 50%;
    				margin: 20px auto;
    				height: 520px;
    				border: 1px solid red;
    				border-radius: 4px;
    				overflow: auto;
    			}
    			.demo-top{
    				width: 60%;
    				margin:20px auto;
    			}
    			select{
    				width: 100%;
    				height: 35px;
    				background: bisque;
    				line-height: 35px;
    				border-radius: 4px;
    				cursor: pointer;
    			}	
    			.demo-bottom{
    				width: 50%;
    				margin:20px auto;
    				border: 1px solid #999;
    				padding-top: 5px;
    				padding-bottom: 5px;
    				border-radius: 4px;
    				background: deepskyblue;
    				cursor: pointer;
    				text-align: center;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="demo">
    			<div class="demo-top">
    				<select>
    					<option value="01">第一行</option>
    					<option value="02">第二行</option>
    					<option value="03">第三行</option>
    					<option value="04">第四行</option>
    					<option value="05">第五行</option>
    					<option value="06">第六行</option>
    					<option value="88">第七行</option>
    					<option value="08">99</option>
    				</select>
    			</div>
    			<div class="demo1 demo-bottom">获取选中的Text</div>
    			<div class="demo2 demo-bottom">获取选中的Value</div>
    			<div class="demo3 demo-bottom">获取选中的索引值</div>
    			<div class="demo4 demo-bottom">获取最小的索引值</div>
    			<div class="demo5 demo-bottom">获取最大的索引值</div>
    			<div class="demo6 demo-bottom">在select中追加一个option，位置最前</div>
    			<div class="demo7 demo-bottom">在select中添加一个option，位置最后</div>
    			<div class="demo8 demo-bottom">删除索引值最小的option，也就是第一个</div>
    			<div class="demo9 demo-bottom">删除索引值最大的option，也就是最后一个</div>
    			<div class="demo10 demo-bottom">删除select中Value值是88的option</div>
    			<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    			<script type="text/javascript">
    				$(function(){
    //					获取选中的Text
    					$(".demo1").click(function(){
    						var checkedText=$("select").find("option:selected").text();
    						alert(checkedText);
    					});
    //					获取选中的Value
    					$(".demo2").click(function(){
    						var checkedValue=$("select").val();
    						alert(checkedValue);
    					});
    //					获取选中的索引值
    					$(".demo3").click(function(){
    						var checkedIndex=$("select").get(0).selectedIndex;
    						alert(checkedIndex);
    					});
    //					获取最小的索引值
    					$(".demo4").click(function(){
    						var minIndex=$("select option:first").index();
    						alert(minIndex);
    					});
    //					获取最大的索引值
    					$(".demo5").click(function(){
    						var maxIndex=$("select option:last").index();
    						alert(maxIndex);
    					});
    //					在select中追加一个option，位置最前
    					$(".demo6").click(function(){
    						 $("select").prepend("<option value='111'>我是添加在最前的</option>"); 
    						 alert("已经添加成功，打开下拉框就可以看到!");
    					});
    //					在select中添加一个option，位置最后
    					$(".demo7").click(function(){
    						 $("select").append("<option value='666'>我是添加在最后的</option>");
    						 alert("已经添加成功，打开下拉框就可以看到!");
    					});
    //					删除索引值最小的option，也就是第一个
    					$(".demo8").click(function(){
    						 $("select option:first").remove();
    						 alert("已经删除成功，打开下拉框就可以看到!");
    					});
    //					删除索引值最大的option，也就是最后一个
    					$(".demo9").click(function(){
    						 $("select option:last").remove(); 
    						 alert("已经删除成功，打开下拉框就可以看到!");
    					});
    //					删除select中Value值是88的option
    					$(".demo10").click(function(){
    						$("select option[value='88']").remove(); 
    						 alert("已经删除成功，打开下拉框就可以看到!");
    					});
    				});
    			</script>
    		</div>
    	</body>
    </html>