jQuery Select下拉框操作小结(推荐)


Posted in Javascript onJuly 22, 2016

jQuery获取Select元素,并选择的Text和Value:

1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发
2. var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text
3. var checkValue=$("#select_id").val(); //获取Select选择的Value
4. var checkIndex=$("#select_id ").get(0).selectedIndex; //获取Select选择的索引值
5. var maxIndex=$("#select_id option:last").attr("index"); //获取Select最大的索引值

jQuery获取Select元素,并设置的 Text和Value:

实例分析:

1. $("#select_id ").get(0).selectedIndex=1; //设置Select索引值为1的项选中
2. $("#select_id ").val(4); // 设置Select的Value值为4的项选中
3. $("#select_id option[text='jQuery']").attr("selected", true); //设置Select的Text值为jQuery的项选中

jQuery添加/删除Select元素的Option项:

实例分析:

1. $("#select_id").append("<option value='Value'>Text</option>"); //为Select追加一个Option(下拉项)
2. $("#select_id").prepend("<option value='0'>请选择</option>"); //为Select插入一个Option(第一个位置)
3. $("#select_id option:last").remove(); //删除Select中索引值最大Option(最后一个)
4. $("#select_id option[index='0']").remove(); //删除Select中索引值为0的Option(第一个)
5. $("#select_id option[value='3']").remove(); //删除Select中Value='3'的Option
6. $("#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); 
}) 
})

以上所述是小编给大家介绍的jQuery Select下拉框操作小结(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript - HTML的request类
Jul 15 Javascript
用jscript实现新建word文档
Jun 15 Javascript
Sample script that displays all of the users in a given SQL Server DB
Jun 16 Javascript
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
checkbox 多选框 联动实现代码
Oct 22 Javascript
js压缩工具 yuicompressor 使用教程
Mar 31 Javascript
JS DOM 操作实现代码
Aug 01 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
jquery对象与DOM对象转化
Feb 08 Javascript
vue-cli和v-charts实现可视化图表过程解析
Oct 08 Javascript
Vue实现随机验证码功能
Dec 29 Vue.js
一起来看看Vue的核心原理剖析
Mar 24 Vue.js
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 #Javascript
JQuery 设置checkbox值二次无效的解决方法
Jul 22 #Javascript
jQuery 自定义下拉框(DropDown)附源码下载
Jul 22 #Javascript
Javascript基础学习笔记(菜鸟必看篇)
Jul 22 #Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 #Javascript
高效Web开发的10个jQuery代码片段
Jul 22 #Javascript
41个Web开发者必须收藏的JavaScript实用技巧
Jul 22 #Javascript
You might like
PHP4中实现动态代理
2006/10/09 PHP
JQuery 确定css方框模型(盒模型Box Model)
2010/01/22 Javascript
flash遮住div问题的正确解决方法
2014/02/27 Javascript
js实现简单随机抽奖的方法
2015/01/27 Javascript
javascript递归回溯法解八皇后问题
2015/04/22 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
jQuery实现的个性化返回底部与返回顶部特效代码
2015/10/30 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
vue.js实现表格合并示例代码
2016/11/30 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
JS获取本周周一,周末及获取任意时间的周一周末功能示例
2017/02/09 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
基于jQuery实现定位导航位置效果
2017/11/15 jQuery
vue todo-list组件发布到npm上的方法
2018/04/04 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
React组件内事件传参实现tab切换的示例代码
2018/07/04 Javascript
vue拖拽组件使用方法详解
2018/12/01 Javascript
使用pm2自动化部署node项目的方法步骤
2019/01/28 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
python使用正则表达式替换匹配成功的组
2017/11/17 Python
Python排序搜索基本算法之冒泡排序实例分析
2017/12/09 Python
Python遍历pandas数据方法总结
2018/02/09 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
Python selenium实现断言3种方法解析
2020/09/08 Python
基于python实现简单网页服务器代码实例
2020/09/14 Python
详解python的super()的作用和原理
2020/10/29 Python
H5最强接口之canvas实现动态图形功能
2019/05/31 HTML / CSS
农田水利实习自我鉴定
2013/09/19 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
小学毕业寄语大全
2014/04/03 职场文书