每一次操作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>
相关推荐
jQuery操作select的实例代码，这篇比较简单，如果想要想了解更多可以参考脚本之家以前发布的
jquery实现select下拉框的取值与赋值，设置选中的方法大全。 比如<select class=”selector”></select> 1、设置value为pxx的项选中 $(“.selector”).val(“pxx”); 2、设置text为pxx的项选中 $(“....
今天小编就为大家分享一篇jquery 动态遍历select 赋值的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
jQuery Air 用户管理界面应用插件，类似于我们以前讲到的jquery select的操作例子，点上面的all复选框后，下面的选项即可进行操作并保存。由于是在国外网站获取的源码，界面没有汉化，所以只能给大家一个灵感，学习...
本篇文章提供一款jquery遍历select教程代码，主要是利用了$(“#<%=ddl_xreg_id.clientid%> option”).each(function() {形式来each遍历一次，这样所有的select就给查询了一次。 代码如下:[removed][removed]...
主要介绍了jquery操作select元素和option的实例代码，感兴趣的小伙伴们可以参考一下
本文实例汇总了jquery操作select的方法。分享给大家供大家参考。具体如下： jQuery获取Select选择的Text和Value: 语法解释： 代码如下:$(“#select_id”).change(function(){//code…});//为Select添加事件，当...
jQuery搜索框实例绑定提交事件是一款下拉选择多种搜索引擎分类，搜索框输入文字键盘回车绑定提交搜索按钮代码。 dropdown-toggle search-select" data-toggle="dropdown">百度搜索 ...
jQuery form表单美化实例代码，input输入框，select下拉框，复选框，单选框等表单元素美化特效。
主要介绍了jquery操作select常见方法,结合实例形式总结分析了jQuery操作select常见的7种情况与相关操作技巧,需要的朋友可以参考下
jQuery表单美化实例代码是一款制作input输入框，select下拉框，复选框，单选框表单美化实例代码。
有兴趣刚需的可以自己下载，非常实用的jquery代码，可以完美运行，有能力的还可以二次修改！
实例如下所示： <select name=region[province] id= class=region valid> 省、直辖市 北京市 </select> var province = $(select[name='region[province]']).val(); 取得textarea的值 <textarea id=...
jquery 资料合集 实例 jQuery由美国人John Resig创建，至今已吸引了来自世界各地的众多javascript高手加入其team，包括来自德国的Jörn Zaefferer，罗马尼亚的Stefan Petre等等。 jQuery是继prototype之后又...
这篇文章主要介绍了jQuery操作选中select下拉框的值代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 js和jQuery联合操作dom真的很好用，如果不是专业...