JQuery操作select的实例代码

最新推荐文章于 2021-08-06 12:24:10 发布

wjxbj

最新推荐文章于 2021-08-06 12:24:10 发布

阅读量211

点赞数

分类专栏： JQuery 文章标签： javaScript JQuery select ViewUI

本文链接：https://blog.csdn.net/wjxbj/article/details/84805331

版权

JQuery 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

每一次操作select的时候，总是要出来翻一下资料，于是找了资料并做了一下小小的总结，以便以后查阅。

夺得2008年欧洲杯冠军的国家是： 
<select name="nation" id="nation"> 
	<option value="">请选择</option> 
	<option value="Germany">德国</option> 
	<option value="France">法国</option> 
	<option value="Italy">意大利</option> 
	<option value="England">英国</option> 
	<option value="Spain">西班牙</option> 
	<option value="Greece">希腊</option> 
</select>

1.判断是否选择了国家

if($("#nation").val()=="") { 
    alert("请选择国家"); 
}

2.获取select中option项的个数

$("#nation").find("option").length;

3.获取选中的option的值value和显示的文本text

//获取选中项的值 
$("#nation").val(); 
//获取选中项显示的文本 
$("#nation").find("option:selected").text();

4.设置西班牙为选中项

$("#nation").find("option[value='Spain']").attr("selected",true);

$("#nation").val("Spain");

5.获取被选中的国家的索引，索引从0开始

$("#nation").find("option:selected").index();

6.设置索引值最大的option为选中项

$("#nation option:last").attr("selected",true);

7.设置索引值最小的option为选中项

$("#nation option:first").attr("selected",true);

8.添加一个国家选项

$("#nation").append("<option value='Ukraine'>乌克兰</option>");

9.删除一个国家选项

//删除value="Italy"的选项 
$("#nation").find("option[value='Italy']").remove(); 
//删除索引为2的选项 
$("#nation").find("option[index=2]").remove();

很多时候用到select的级联，即第二个select的值随着第一个select选中的值变化。这在jQuery中是非常简单的。如：

$(".selector1").change(function(){
     // 先清空第二个
      $(".selector2").empty();
     // 实际的应用中，这里的option一般都是用循环生成多个了
      var option = $("<option>").val(1).text("pxx");
      $(".selector2").append(option);
});

附实例代码：

<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=Edge">
	</head>
	<body>
		<div>
                        夺得2008年欧洲杯冠军的国家是：
			<select name="nation" id="nation"> 
				<option value="">请选择</option> 
				<option value="Germany">德国</option> 
				<option value="France">法国</option> 
				<option value="Italy">意大利</option> 
				<option value="England">英国</option> 
				<option value="Spain">西班牙</option> 
				<option value="Greece">希腊</option> 
			</select>
		</div>
		<script type="text/javascript" src="jquery-1.12.4.min.js"></script>
		<script type='text/javascript'>
			//获取第一个option的值
			$(document).ready(function(){
				$('#nation').change(function(){ 
					//alert($(this).children('option:selected').val());
					//1.判断是否选择了国家
					if($("#nation").val()=="") { 
						alert("请选择国家"); 
					}
					//2.获取select中option项的个数
					var length = $("#nation").find("option").length;
					alert("length:" + length);
					//3.获取选中项的value 
					var val = $("#nation").val(); 
					//4.获取选中项显示的文本 
					var textVal = $("#nation").find("option:selected").text(); 
					alert(val + ":" + textVal);
					//5.获取被选中的国家的索引，索引从0开始
					var index = $("#nation").find("option:selected").index();
					alert("index:" + index);
					//6.设置西班牙为选中项
					$("#nation").find("option[value='Spain']").attr("selected",true);
					alert($("#nation").val());
					//设置value为England为选中项
					$("#nation").val("England");
					alert($("#nation").val());
					//设置索引值最大的option为选中项
					$("#nation option:last").attr("selected",true);
					alert($("#nation").val());
					//设置索引值最小的option为选中项
					$("#nation option:first").attr("selected",true);
					alert($("#nation").val());
					//7.添加一个国家选项
					$("#nation").append("<option value='Ukraine'>乌克兰</option>");
					//8.删除一个国家选项
					//删除value="Italy"的选项 
					$("#nation").find("option[value='Italy']").remove(); 
					//删除索引为2的选项 
					$("#nation").find("option[index=2]").remove(); 
				});
			});
		</script>
	</body>
</html>

参考文章：http://www.jb51.net/article/30577.htm

http://blog.csdn.net/nairuohe/article/details/6307367

wjxbj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery操作select的实例代码

每一次操作select的时候，总是要出来翻一下资料，于是找了资料并做了一下小小的总结，以便以后查阅。夺得2008年欧洲杯冠军的国家是： &lt;select name="nation" id="nation"&gt; &lt;option value=""&gt;请选择&lt;/option&gt; &lt;option value="Ger
复制链接

扫一扫