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 相关文章推荐
21个值得收藏的Javascript技巧
Feb 04 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
轻松实现javascript数据双向绑定
Nov 11 Javascript
jQuery中ztree 点击文本框弹出下拉框的实例代码
Feb 05 Javascript
Angular.js跨controller实现参数传递的两种方法
Feb 20 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
原生js封装的ajax方法示例
Aug 02 Javascript
element-ui表格列金额显示两位小数的方法
Aug 24 Javascript
微信小游戏之使用three.js 绘制一个旋转的三角形
Jun 10 Javascript
解决layui中onchange失效以及form动态渲染失效的问题
Sep 27 Javascript
Vue项目移动端滚动穿透问题的实现
May 19 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 Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
smarty循环嵌套用法示例分析
2016/07/19 PHP
Linux下快速搭建php开发环境
2017/03/13 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
用cookies实现的可记忆的样式切换效果代码下载
2007/12/24 Javascript
jQuery中click事件用法实例
2014/12/26 Javascript
JavaScript中使用指数方法Math.exp()的简介
2015/06/15 Javascript
js正则表达式验证邮件地址
2015/11/12 Javascript
AngularJS中$interval的用法详解
2016/02/02 Javascript
node.js实现端口转发
2016/04/14 Javascript
jQuery实现的模拟弹出窗口功能示例
2016/11/24 Javascript
BootStrap表单宽度设置方法
2017/03/10 Javascript
JavaScript模拟文件拖选框样式v1.0的实例
2017/08/04 Javascript
基于javascript中的typeof和类型判断(详解)
2017/10/27 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
2018/10/17 Javascript
vue中的router-view组件的使用教程
2018/10/23 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
JavaScript中reduce()的5个基本用法示例
2020/07/19 Javascript
[01:32]2014DOTA2西雅图邀请赛 CIS我们有信心进入正赛
2014/07/08 DOTA
python操作MySQL 模拟简单银行转账操作
2017/09/27 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
Python3 解决读取中文文件txt编码的问题
2019/12/20 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
Clarks鞋法国官方网站:英国其乐鞋品牌
2018/02/11 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
网络通讯中,端口有什么含义,端口的取值范围
2012/11/23 面试题
班级道德讲堂实施方案
2014/02/24 职场文书
技术比武方案
2014/05/19 职场文书
中学教师师德承诺书
2014/05/23 职场文书
档案保密承诺书
2014/06/03 职场文书
教师批评与自我批评(群众路线)
2014/10/15 职场文书
如何把新闻人物写得立体、鲜活?
2019/08/14 职场文书
Python爬虫基础之爬虫的分类知识总结
2021/05/13 Python
微信小程序调用python模型
2022/04/21 Python
Tomcat弱口令复现及利用
2022/05/06 Servers