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 相关文章推荐
论坛特效代码收集(落伍转发-不错)
Dec 02 Javascript
优化javascript的执行速度
Jan 23 Javascript
JavaScript面向对象设计二 构造函数模式
Dec 20 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
JavaScript模拟深蓝vs卡斯帕罗夫的国际象棋对局示例
Apr 22 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
node.js入门实例helloworld详解
Dec 23 Javascript
详解Node.js中的Async和Await函数
Feb 22 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
使用p5.js实现动态GIF图片临摹重现
Oct 23 Javascript
Element Alert警告的具体使用方法
Jul 27 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
常用星际术语索引(新手指南)
2020/03/04 星际争霸
PHP 已经成熟
2006/12/04 PHP
php中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
PHP下编码转换函数mb_convert_encoding与iconv的使用说明
2009/12/16 PHP
php设计模式 Decorator(装饰模式)
2011/06/26 PHP
php通过ajax实现双击table修改内容
2014/04/28 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP SOCKET编程详解
2015/05/22 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
php实现的中秋博饼游戏之绘制骰子图案功能示例
2017/11/06 PHP
JS类定义原型方法的两种实现的区别评论很多
2007/09/12 Javascript
获得Javascript对象属性个数的示例代码
2013/11/21 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
JS经典正则表达式笔试题汇总
2016/12/15 Javascript
BOM之navigator对象和用户代理检测
2017/02/10 Javascript
浅谈Vue的加载顺序探讨
2017/10/25 Javascript
基于模板引擎Jade的应用(详解)
2017/12/12 Javascript
JavaScript Canvas实现验证码
2020/08/02 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
vuejs数据超出单行显示更多,点击展开剩余数据实例
2019/05/05 Javascript
[05:17]DOTA2睡衣妹卖萌求签名 CJ第二天全明星影像
2013/07/28 DOTA
将python代码和注释分离的方法
2018/04/21 Python
用Python写脚本,实现完全备份和增量备份的示例
2018/04/29 Python
Python将视频或者动态图gif逐帧保存为图片的方法
2019/09/10 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
使用Python将xmind脑图转成excel用例的实现代码(一)
2020/10/12 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
Cinque网上商店:德国服装品牌
2019/03/17 全球购物
联强国际笔试题面试题
2013/07/10 面试题
幼儿园毕业典礼主持词
2014/03/21 职场文书
我的教育故事演讲稿
2014/05/04 职场文书
六一儿童节演讲稿
2014/05/23 职场文书
销售口号大全
2014/06/11 职场文书
人事行政专员岗位职责
2014/07/23 职场文书
小学教师师德整改措施
2014/09/29 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers