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


Posted in Javascript onDecember 13, 2013

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); 
}) 
})

Javascript 相关文章推荐
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
Nov 29 Javascript
使用jQuery实现Web页面换肤功能的要点解析
May 12 Javascript
javascript宿主对象之window.navigator详解
Sep 07 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
bootstrap treeview 扩展addNode方法动态添加子节点的方法
Nov 21 Javascript
puppeteer实现html截图的示例代码
Jan 10 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
Dec 13 #Javascript
jquery改变disabled的boolean状态的三种方法
Dec 13 #Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
Dec 13 #Javascript
Extjs4中的分页应用结合前后台
Dec 13 #Javascript
php显示当前文件所在的文件以及文件夹所有文件以树形展开
Dec 13 #Javascript
window.print打印指定div实例代码
Dec 13 #Javascript
Javascript中call的两种用法实例
Dec 13 #Javascript
You might like
php&amp;mysql 日期操作小记
2012/02/27 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
js去除重复字符串两种实现方法
2013/01/09 Javascript
jquery 缓存问题的几个解决方法
2013/11/11 Javascript
原生js实现addClass,removeClass,hasClass方法
2016/04/27 Javascript
js字符串截取函数slice、substring和substr的比较
2016/05/17 Javascript
BootStrap智能表单demo示例详解
2016/06/13 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法
2016/10/27 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
nodejs入门教程二:创建一个简单应用示例
2017/04/24 NodeJs
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
ES6 javascript中class类的get与set用法实例分析
2017/10/30 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
[03:22]DSPL第一期精彩集锦:酷炫到底!
2014/11/07 DOTA
djang常用查询SQL语句的使用代码
2019/02/15 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
Python实现socket非阻塞通讯功能示例
2019/11/06 Python
Python调用Windows命令打印文件
2020/02/07 Python
使用Python实现牛顿法求极值
2020/02/10 Python
通过实例解析Python return运行原理
2020/03/04 Python
Django实现简单的分页功能
2021/02/22 Python
css3.0 图形构成实例练习一
2013/03/19 HTML / CSS
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
入团者的自我评价分享
2013/12/02 职场文书
六一儿童节主持词
2014/03/21 职场文书
蓝颜请假条
2014/04/11 职场文书
英文演讲稿
2014/05/15 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
2015年秋学期师德师风建设工作总结
2015/10/23 职场文书
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
Spring中的@Transactional的工作原理
2022/06/05 Java/Android