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 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
Javascript实现重力弹跳拖拽运动效果示例
Jun 28 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
jQuery实现网页抖动的菜单抖动效果
Aug 07 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
Nov 03 Javascript
JavaScript代码性能优化总结(推荐)
May 16 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
微信小程序tabBar用法实例详解
Dec 04 Javascript
详解JavaScript 事件流
Sep 02 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 动态执行带有参数的类方法
2009/04/10 PHP
抓取YAHOO股票报价的类
2009/05/15 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
PHP输出两个数字中间有多少个回文数的方法
2015/03/23 PHP
javascript eval函数深入认识
2009/02/21 Javascript
最常用的12种设计模式小结
2011/08/09 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
js模仿jquery的写法示例代码
2013/06/16 Javascript
JS实现带鼠标效果的头像及文章列表代码
2015/09/27 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
2017/06/26 jQuery
深入理解Angular4订阅(Subscribe)与取消
2017/11/22 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
Python基于FTP模块实现ftp文件上传操作示例
2018/04/23 Python
python之django母板页面的使用
2018/07/03 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
python 动态调用函数实例解析
2019/10/21 Python
详解Python中打乱列表顺序random.shuffle()的使用方法
2019/11/11 Python
浅谈python 调用open()打开文件时路径出错的原因
2020/06/05 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
美国摄影爱好者购物网站:Focus Camera
2016/10/21 全球购物
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
在对linux系统分区进行格式化时需要对磁盘簇(或i节点密度)的大小进行选择,请说明选择的原则
2012/11/24 面试题
shell程序如何生命变量?shell变量是弱变量吗?
2014/11/10 面试题
卫校中专生个人自我评价
2013/09/19 职场文书
清洁工表扬信
2014/01/08 职场文书
2014年大学生党员自我评议
2014/09/22 职场文书
2014年工会工作总结
2014/11/12 职场文书
2016年寒假社会实践活动心得体会
2015/10/09 职场文书
村官2015年度工作总结
2015/10/14 职场文书
二年级数学教学反思
2016/02/16 职场文书
python中mongodb包操作数据库
2022/04/19 Python
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript