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.ajax 用户登录验证代码
Oct 29 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
jquery控制显示服务器生成的图片流
Aug 04 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
JS闭包经典实例详解
Dec 20 Javascript
微信小程序常用简易小函数总结
Feb 01 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
JavaScript中this的学习笔记及用法整理
Feb 17 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 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
使用PHPCMS搭建wap手机网站
2015/09/20 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP+MariaDB数据库操作基本技巧备忘总结
2018/05/21 PHP
JavaScript实现16进制颜色值转RGB的方法
2015/02/09 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
javascript浅层克隆、深度克隆对比及实例解析
2020/02/09 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
[36:41]完美世界DOTA2联赛循环赛FTD vs Magma第一场 10月30日
2020/10/31 DOTA
Python写的贪吃蛇游戏例子
2014/06/16 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python匹配中文的正则表达式
2016/05/11 Python
python入门教程 python入门神图一张
2018/03/05 Python
Django 根据数据模型models创建数据表的实例
2018/05/27 Python
python pandas修改列属性的方法详解
2018/06/09 Python
TensorFlow用expand_dim()来增加维度的方法
2018/07/26 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
python 实现多维数组转向量
2019/11/30 Python
Pytorch 神经网络—自定义数据集上实现教程
2020/01/07 Python
浅谈Pycharm最有必要改的几个默认设置项
2020/02/14 Python
Python如何输出整数
2020/06/07 Python
python如何处理程序无法打开
2020/06/16 Python
IE浏览器单独写CSS样式的几种方法
2014/10/14 HTML / CSS
介绍一下grep命令的使用
2012/06/28 面试题
专科毕业生求职简历的自我评价
2013/10/12 职场文书
传媒专业推荐信范文
2013/11/23 职场文书
办公室文员工作自我评价
2013/12/01 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
幼儿教师师德承诺书
2014/05/23 职场文书
项目经理任命书内容
2014/06/06 职场文书
学校教师读书活动总结
2014/07/08 职场文书
导游词之烟台威海蓬莱
2019/11/14 职场文书