option的添加删除与选中

最新推荐文章于 2021-05-14 16:06:17 发布

Bright2017

最新推荐文章于 2021-05-14 16:06:17 发布

阅读量1.8k

点赞数 3

分类专栏： Jquery 文章标签： option

本文链接：https://blog.csdn.net/Bright2017/article/details/73612857

版权

Jquery 专栏收录该内容

25 篇文章 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>