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 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
js 获取和设置css3 属性值的实现方法
May 06 Javascript
如何使用JS获取IE上传文件路径(IE7,8)
Jul 08 Javascript
经过绑定元素时会多次触发mouseover和mouseout事件
Feb 28 Javascript
jquery检测input checked 控件是否被选中的方法
Mar 26 Javascript
深入解析JavaScript中的数字对象与字符串对象
Oct 21 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
vue Tab切换以及缓存页面处理的几种方式
Nov 05 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
解决elementui表格操作列自适应列宽
Dec 28 Javascript
如何利用JavaScript编写一个格斗小游戏
Jan 06 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模拟GET及POST函数代码
2010/04/25 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
避免jQuery名字冲突 noConflict()方法
2016/07/30 Javascript
JS实现仿PS的调色板效果完整实例
2016/12/21 Javascript
JS实现的简易拖放效果示例
2016/12/29 Javascript
微信小程序(三):网络请求
2017/01/13 Javascript
详解angularjs获取元素以及angular.element()用法
2017/07/25 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
2019/08/20 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
[16:43]Heroes19_剃刀(完美)
2014/10/31 DOTA
布同自制Python函数帮助查询小工具
2011/03/13 Python
使用python调用浏览器并打开一个网址的例子
2014/06/05 Python
Python入门篇之文件
2014/10/20 Python
Python构造函数及解构函数介绍
2015/02/26 Python
一篇文章入门Python生态系统(Python新手入门指导)
2015/12/11 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python Series从0开始索引的方法
2018/11/06 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
Python3删除排序数组中重复项的方法分析
2019/01/31 Python
wxpython布局的实现方法
2019/11/01 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
Python3 ID3决策树判断申请贷款是否成功的实现代码
2020/05/21 Python
python 如何区分return和yield
2020/09/22 Python
PyTorch中的拷贝与就地操作详解
2020/12/09 Python
html5小程序飞入购物车(抛物线绘制运动轨迹点)
2020/10/19 HTML / CSS
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
经典演讲稿汇总
2014/05/19 职场文书
倡议书的写法
2014/08/30 职场文书
2014年团总支工作总结
2014/11/21 职场文书
2016党员干部政治学习心得体会
2016/01/23 职场文书
有关花店创业的计划书模板
2019/08/27 职场文书