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实现无刷新更新数据的详细步骤 asp
Dec 26 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
javascript二维数组转置实例
Jan 22 Javascript
javascript禁止访客复制网页内容的实现代码
Aug 05 Javascript
AngularJS基础 ng-if 指令用法
Aug 01 Javascript
微信小程序 动态绑定数据及动态事件处理
Mar 14 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
利用JavaScript如何查询某个值是否数组内
Jul 30 Javascript
Vue动态组件与异步组件实例详解
Feb 23 Javascript
详解element上传组件before-remove钩子问题解决
Apr 08 Javascript
javascript使用canvas实现饼状图效果
Sep 08 Javascript
ES6的循环与可迭代对象示例详解
Jan 31 Javascript
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
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
几个实用的PHP内置函数使用指南
2014/11/27 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
JS 实现完美include载入实现代码
2010/08/05 Javascript
js各种验证文本框输入格式(正则表达式)
2010/10/22 Javascript
js操作textarea方法集合封装(兼容IE,firefox)
2011/02/22 Javascript
js修改地址栏URL参数解决url参数问题
2012/12/15 Javascript
javascript实现获取服务器时间
2015/05/19 Javascript
java必学必会之static关键字
2015/12/03 Javascript
学习javascript面向对象 理解javascript原型和原型链
2016/01/04 Javascript
JavaScript表单验证实例之验证表单项是否为空
2016/01/10 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
详解Webpack-dev-server的proxy用法
2018/09/08 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python实现115网盘自动下载的方法
2014/09/30 Python
Python中偏函数用法示例
2018/06/07 Python
Python图像处理之简单画板实现方法示例
2018/08/30 Python
使用Python快速制作可视化报表的方法
2019/02/03 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
使用tensorflow实现矩阵分解方式
2020/02/07 Python
python去除删除数据中\u0000\u0001等unicode字符串的代码
2020/03/06 Python
Python中内建模块collections如何使用
2020/05/27 Python
英国、欧洲和全球租车服务:Avis英国
2016/08/29 全球购物
中国跨境电商:Tomtop
2017/03/16 全球购物
什么是事务?事务有哪些性质?
2012/03/11 面试题
北京颐和园导游词
2015/01/30 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
2016新年年会主持词
2015/07/06 职场文书
团队执行力培训心得体会
2015/08/15 职场文书
导游词之西安骊山
2019/12/20 职场文书
nginx location中多个if里面proxy_pass的方法
2021/03/31 Servers