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 相关文章推荐
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
基于javascript 闭包基础分享
Jul 10 Javascript
固定表格行列(expression)在IE下适用
Jul 25 Javascript
JS this作用域以及GET传输值过长的问题解决方法
Aug 06 Javascript
JS 页面计时器示例代码
Oct 28 Javascript
jquery带动画效果幻灯片特效代码
Aug 27 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
简单谈谈require模块化jquery和angular的问题
Jun 23 jQuery
layer.confirm点击第一个按钮关闭弹出框的方法
Sep 09 Javascript
Vue.js计算机属性computed和methods方法详解
Oct 12 Javascript
原生js+ajax分页组件
Jan 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模拟socket一次连接,多次发送数据的实现代码
2011/07/26 PHP
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
php绘图之在图片上写中文和英文的方法
2015/01/24 PHP
php获取json数据所有的节点路径
2015/05/17 PHP
PHP 中 Orientation 属性判断上传图片是否需要旋转
2015/10/16 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
2017/08/18 Javascript
JS库particles.js创建超炫背景粒子插件(附源码下载)
2017/09/13 Javascript
浅谈react受控组件与非受控组件(小结)
2018/02/09 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
2019/08/14 Javascript
解决layui调用自定义方法提示未定义的问题
2019/09/14 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
vue.js封装switch开关组件的操作
2020/10/26 Javascript
pandas中Timestamp类用法详解
2017/12/11 Python
Python字符串的常见操作实例小结
2019/04/08 Python
django写用户登录判定并跳转制定页面的实例
2019/08/21 Python
Django Xadmin多对多字段过滤实例
2020/04/07 Python
python继承threading.Thread实现有返回值的子类实例
2020/05/02 Python
pytorch SENet实现案例
2020/06/24 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
远程Wi-Fi宠物监控相机:Petcube
2017/04/26 全球购物
Lookfantastic西班牙官网:英国知名美妆购物网站
2018/06/13 全球购物
电气个人求职信范文
2014/02/04 职场文书
典型事迹材料范文
2014/12/29 职场文书
2016春节家属慰问信
2015/03/25 职场文书
会议通知格式范文
2015/04/15 职场文书
电工生产实习心得体会
2016/01/22 职场文书
基于Python的EasyGUI学习实践
2021/05/07 Python
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
浅析Python中的随机采样和概率分布
2021/12/06 Python
Vertica集成Apache Hudi重磅使用指南
2022/03/31 Servers