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 例外被抛出且未被接住原因介绍
Sep 04 Javascript
node.js中的fs.utimes方法使用说明
Dec 15 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
有关文件上传 非ajax提交 得到后台数据问题
Oct 12 Javascript
AngularJS Phonecat实例讲解
Nov 21 Javascript
JavaScript模块化之使用requireJS按需加载
Apr 12 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
详解Vue.js 响应接口
Jul 04 Javascript
vue使用openlayers实现移动点动画
Sep 24 Javascript
详解ES6实现类的私有变量的几种写法
Feb 10 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查询MySQL大量数据的时候内存占用分析
2011/07/22 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
php冒泡排序与快速排序实例详解
2015/12/07 PHP
PHP简单实现文本计数器的方法
2016/04/28 PHP
PHP最常用的正则表达式
2017/02/13 PHP
基于php中echo用逗号和用点号的区别详解
2018/01/23 PHP
PHP实现Snowflake生成分布式唯一ID的方法示例
2020/08/30 PHP
javascript parseInt 函数分析(转)
2009/03/21 Javascript
添加JavaScript重载函数的辅助方法2
2010/07/04 Javascript
实现图片预加载的三大方法及优缺点分析
2014/11/19 Javascript
前端微信支付js代码
2016/07/25 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
ES6教程之for循环和Map,Set用法分析
2017/04/10 Javascript
JavaScript编程设计模式之观察者模式(Observer Pattern)实例详解
2017/10/25 Javascript
Javascript实现动态时钟效果
2018/11/17 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
使用p5.js临摹动态图片
2019/11/04 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
python装饰器decorator介绍
2014/11/21 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python解决抛小球问题 求小球下落经历的距离之和示例
2018/02/01 Python
从0开始的Python学习014面向对象编程(推荐)
2019/04/02 Python
python检测服务器端口代码实例
2019/08/31 Python
实习求职信
2013/12/01 职场文书
优秀毕业自我鉴定
2014/02/15 职场文书
银行贷款承诺书
2014/03/29 职场文书
《吃水不忘挖井人》教学反思
2014/04/15 职场文书
留学推荐信范文
2014/05/10 职场文书
根叔历年演讲稿
2014/05/20 职场文书
人事任命书格式
2014/06/05 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书