文档章节

jquery获得option的值和对option进行操作

hymanPeng
 hymanPeng
发布于 2015/11/17 19:15
字数 875
阅读 8
收藏 0

jquery获得option的值和对option进行操作

作者:  字体:[增加 减小] 类型:转载 时间:2013-12-13

本文为大家介绍下jquery获得option的值和对option的操作,下面有不错的示例分析及示例代码,感兴趣的朋友可以了解下

jQuery获取Select元素,并选择的Text和Value:

复制代码 代码如下:


$("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
var checkValue=$("#select_id").val(); //获取Select选择的Value
var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值


jQuery获取Select元素,并设置的 Text和Value:

实例分析:

复制代码 代码如下:


$("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
$("#select_id ").val(4); // 设置Select的Value值为4的项选中
$("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中


jQuery添加/删除Select元素的Option项:

实例分析:

复制代码 代码如下:


$("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
$("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
$("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
$("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
$("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
$("#select_id option[text='4']").remove(); //删除Select中Text='4'的Option

三级分类 <select name="thirdLevel" id="thirdLevel"
onchange="getFourthLevel()">
<option value="0" id="thirdOption">
请选择三级分类
</option>
</select>
</div>

四级分类:
<select name="fourthLevelId" id="fourthLevelId">
<option value="0" id="fourthOption">
请选择四级分类
</option>
</select>
</div>
if($("#thirdLevel").val()!=0){
$("#thirdLevel option[value!=0]").remove();
}
if($("#fourthLevelId").val()!=0){
$("#fourthLevelId option[value!=0]").remove();
}//这个表示:假如我们希望当选择选择第三类时:如果第四类中有数据则删除,如果没有数据第四类的商品中的为默认值。在后面学习了AJAX技术后经常会使用到!


获取Select :
获取select 选中的 text :
$("#ddlRegType").find("option:selected").text();
获取select选中的 value:

$("#ddlRegType ").val();

获取select选中的索引:
$("#ddlRegType ").get(0).selectedIndex;
设置select:
设置select 选中的索引:
$("#ddlRegType ").get(0).selectedIndex=index;//index为索引值

设置select 选中的value:

复制代码 代码如下:


$("#ddlRegType ").attr("value","Normal“);
$("#ddlRegType ").val("Normal");
$("#ddlRegType ").get(0).value = value;


设置select 选中的text:

复制代码 代码如下:


var count=$("#ddlRegType option").length;
for(var i=0;i<count;i++)
{ if($("#ddlRegType ").get(0).options[i].text == text)
{
$("#ddlRegType ").get(0).options[i].selected = true;
break;
}
}

$("#select_id option[text='jQuery']").attr("selected", true);


设置select option项:

复制代码 代码如下:


$("#select_id").append("<option value='Value'>Text</option>"); //添加一项option
$("#select_id").prepend("<option value='0'>请选择</option>"); //在前面插入一项option
$("#select_id option:last").remove(); //删除索引值最大的Option
$("#select_id option[index='0']").remove();//删除索引值为0的Option
$("#select_id option[value='3']").remove(); //删除值为3的Option
$("#select_id option[text='4']").remove(); //删除TEXT值为4的Option


清空 Select:

$("#ddlRegType ").empty();

jquery获得值:

val()
text()

设置值
val('在这里设置值')

复制代码 代码如下:


$("document").ready(function(){
$("#btn1").click(function(){
$("[name='checkbox']").attr("checked",'true');//全选
})
$("#btn2").click(function(){
$("[name='checkbox']").removeAttr("checked");//取消全选
})
$("#btn3").click(function(){
$("[name='checkbox']:even").attr("checked",'true');//选中所有奇数
})
$("#btn4").click(function(){
$("[name='checkbox']").each(function(){//反选
if($(this).attr("checked")){
$(this).removeAttr("checked");
}
else{
$(this).attr("checked",'true');
}
})
})
$("#btn5").click(function(){//输出选中的值
var str="";
$("[name='checkbox'][checked]").each(function(){
str+=$(this).val()+"\r\n";
//alert($(this).val());
})
alert(str);
})
})


本文转载自:http://www.jb51.net/article/44443.htm

hymanPeng
粉丝 1
博文 13
码字总数 1889
作品 0
深圳
架构师
私信 提问
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
108
0
jquery 学习

1.常见的jquery 对象操作 jquery取radio单选按钮的值 $("input[name='items']:checked").val(); jquery radio取值,checkbox取值,select取值,radio选中,checkbox选中,select选中,及其相......

晨曦之光
2012/03/09
90
0
转-JQuery选择器及radio,checkbox,select取值和反选

jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myElement所以得到的是唯一的元...

huntering
2015/08/25
198
0
jquery获取表单值的一些简单操作汇总

var mykindtxt=$("#kind option:selected").text();//获取表单selected 选中文本内容 jquery如何取得text,areatext,radio,checkbox,select的值,以及其他一些操作;假如我们有如下页面: <inpu......

小样
2012/02/17
1K
0
jquery 对select中的option操作

Jquery的功能很强大,下面介绍Jquery操作表单Select元素的用法: jQuery获取Select元素,并选择的Text和Value: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选......

JAVA_NINA
2011/12/05
4.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

灵光一闪来个科普贴:Linux文件系统

在计算机系统中,各种需要保存的信息都是以文件的形式存在的。文件管理是对系统信息资源的管理,是操作系统的一项重要功能。 1.文件与文件系统: 1.1文件: 文件是具有名字的一组相关信息的有...

Linux就该这么学
31分钟前
4
0
ExtJS 4.2 评分组件

本文转载于:专业的前端网站➸ExtJS 4.2 评分组件 上一文章是扩展ExtJS自带的Date组件。在这里将创建一个评分组件。 目录 1. 介绍 2. 示例 3. 资源下载 1. 介绍 代码参考的是 Sencha Touch 2...

前端老手
34分钟前
4
0
如何为视频添加封面?

一个好的视频封面可以吸引观众的眼球,从而起到事半功倍的宣传效果,但是很多小伙伴并不知道怎么给视频添加封面。下面分享一个制作封面否方法,操作起来也比较简单的,有兴趣的小伙伴请接着往...

白米稀饭2019
44分钟前
4
0
如何使用soapUI模拟webservice客户端发送请求

参考资料 https://jingyan.baidu.com/article/cbcede0712849a02f40b4d88.html 左边是请求参数,可以自己填写!按着那个绿色三角箭头可以模拟发送请求,右边是返回的报文 soapui如何发送xml格...

故久呵呵
今天
6
0
Java Security 介绍

1.介绍 Java平台设计的重点是安全性。在其核心,java语言本身是类型安全的并且提供了垃圾自动回收,这使其增加了应用程序代码的健壮性。安全的类加载以及验证机制确保了只有合法的代码才能够...

lixiaobao
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部