`

JQuery操作select的实例代码

阅读更多

         每一次操作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

分享到:
评论

相关推荐

    jquery操作select大全

    jQuery操作Select大全主要包含了一系列使用jQuery操作select下拉列表的方法和实例。在Web开发过程中,动态地与select元素进行交互是常见的需求,jQuery为此提供了简洁高效的方法来实现这些功能。 #### 2. 选择器的...

    jQuery Select下拉框美化代码.zip

    本文将详细探讨如何使用jQuery实现下拉框的美化,并结合"jQuery Select下拉框美化代码.zip"中的实例进行解析。 首先,jQuery是一个强大的JavaScript库,它简化了DOM操作、事件处理和Ajax交互,使得开发者能更高效地...

    jQuery Select下拉框美化代码

    `jQuery Select下拉框美化代码`就是一个专门解决这一问题的实例,它采用绿色清新风格,并添加了滚动条效果,使得原本单调的下拉框变得更具吸引力。 首先,我们需要了解jQuery库。jQuery是一个广泛使用的JavaScript...

    JQuery插件select2

    在压缩包`select2-4.0.0`中,通常包含了Select2库的JavaScript文件、CSS文件、图片资源以及示例代码。开发者需要将这些资源正确引入到项目中,并根据需求进行配置。同时,4.0.0版本可能包含了更新日志、许可证信息等...

    jquery 动态遍历select 赋值的实例

    在jQuery中,可以使用多种选择器来选取页面中的select元素,并对其进行操作。例如,使用 $("#selDepUnit") 可以选取id为selDepUnit的select元素。若要获取这个select元素当前选中的值,可以使用.children('option:...

    jQuery实现select样式美化代码

    通过上述步骤,我们可以实现一个基本的jQuery美化select的实例。当然,实际应用中,可能还需要处理更多细节,比如响应式布局、动画效果等。对于更复杂的场景,可以考虑使用现成的插件,如Select2或Chosen,它们提供...

    jQuery form表单美化实例代码.zip

    **jQuery Form 表单美化实例代码** 在网页开发中,用户界面的美观度与交互性是提升用户体验的关键因素之一,而表单作为用户与网站互动的重要桥梁,其设计尤为重要。`jQuery`,一个轻量级的JavaScript库,以其简洁的...

    jquery根据name取得select选中的值实例(超简单)

    实例如下所示: &lt;select name=region[province] id= class=region valid&gt; 省、直辖市 北京市 &lt;/select&gt; var province = $(select[name='region[province]']).val(); 取得textarea的值 &lt;textarea id=...

    jQuery操作select的实例代码

    以上就是使用jQuery操作HTML中`&lt;select&gt;`元素的一些基本实例。通过这些方法,开发者可以方便地实现对下拉列表的各种交互需求,如动态更新选项、验证用户选择等。在实际项目中,还可以结合其他jQuery方法和事件处理器...

    jquery操作select取值赋值与设置选中实例

    jquery实现select下拉框的取值与赋值,设置选中的方法大全。 比如&lt;select class=”selector”&gt;&lt;/select&gt; 1、设置value为pxx的项选中 $(“.selector”).val(“pxx”); 2、设置text为pxx的项选中 $(“....

    jQuery操作select下拉框并保存的个性实例.rar

    jQuery Air 用户管理界面应用插件,类似于我们以前讲到的jquery select的操作例子,点上面的all复选框后,下面的选项即可进行操作并保存。由于是在国外网站获取的源码,界面没有汉化,所以只能给大家一个灵感,学习...

    jQuery form表单美化实例代码

    总之,这个"jQuery form表单美化实例代码"项目旨在通过HTML、CSS和jQuery的结合,创造出美观且功能丰富的表单界面,提高用户的交互体验。通过学习和实践这个实例,开发者可以掌握如何利用jQuery和CSS来定制化表单...

    jquery遍历select元素(实例讲解)

    本篇文章提供一款jquery遍历select教程代码,主要是利用了$(“#&lt;&#37;=ddl_xreg_id.clientid%&gt; option”).each(function() {形式来each遍历一次,这样所有的select就给查询了一次。 代码如下:[removed][removed]...

    jquery 多选下拉框实例

    7. **实例代码**: - 压缩包中的"多选框"文件可能包含了实现这一功能的具体HTML、CSS和JavaScript代码。你可以通过查看这些文件,学习如何实际实现这样一个多选下拉框,并根据项目需求进行调整。 总之,这个实例...

    jQuery搜索框实例绑定提交事件.zip

    jQuery搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类,搜索框输入文字键盘回车绑定提交搜索按钮代码。    dropdown-toggle search-select" data-toggle="dropdown"&gt;百度搜索  ...

    jquery操作Radio、Checkbox、Select Demo

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理、动画效果和Ajax交互...提供的Demo文件应该包含了这些操作的实例代码,通过查看和实践,可以加深理解并灵活运用到自己的项目中。

    jquery操作select元素和option的实例代码

    在本实例中,我们将深入探讨如何使用jQuery来操作`select`元素及其内部的`option`选项。 首先,我们需要引入jQuery库,这可以通过在HTML文档的`&lt;head&gt;`部分添加jQuery的CDN链接或者本地路径来实现。在这个例子中,...

Global site tag (gtag.js) - Google Analytics