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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
为指定元素增加样式的js代码
Dec 09 Javascript
js读写(删除)Cookie实例详解
Apr 17 Javascript
addEventListener 的用法示例介绍
May 07 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
Sep 16 Javascript
vue父子组件的数据传递示例
Mar 07 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
浅谈React高阶组件
Mar 28 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
javascript使用链接跨域下载图片
Nov 01 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 CI框架插入一条或多条sql记录示例
2014/07/29 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
php图片裁剪函数
2018/10/31 PHP
PHP实现的微信APP支付功能示例【基于TP5框架】
2019/09/16 PHP
php实现简单四则运算器
2020/11/29 PHP
filters.revealTrans.Transition使用方法小结
2010/08/19 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
jquery uaMatch源代码
2011/02/14 Javascript
一个简单的js树形菜单
2011/12/09 Javascript
Jquery 实现grid绑定模板
2015/01/28 Javascript
javascript的函数劫持浅析
2016/09/26 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
2017/11/03 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
vue项目上传Github预览的实现示例
2018/11/06 Javascript
vue解决花括号数据绑定不成功的问题
2019/10/30 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
webpack打包html里面img后src为“[object Module]”问题
2019/12/22 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python计算最小优先级队列代码分享
2013/12/18 Python
编写Python的web框架中的Model的教程
2015/04/29 Python
自己使用总结Python程序代码片段
2015/06/02 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
使用matplotlib画散点图的方法
2018/05/25 Python
python print出共轭复数的方法详解
2019/06/25 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
2013/01/23 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
个人贷款授权委托书样本
2014/10/07 职场文书
死者家属慰问信
2015/03/24 职场文书
Linux中文件的基本属性介绍
2022/06/01 Servers