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学习笔记(五) Array 数组类型介绍
Jun 19 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
多个checkbox被选中时如何判断是否有自己想要的
Sep 22 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
jQuery遍历对象、数组、集合实例
Nov 08 Javascript
Jquery中Event对象属性小结
Feb 27 Javascript
jquery通过closest选择器修改上级元素的方法
Mar 17 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
Jun 04 Javascript
js传值后台中文出现乱码的解决方法
Jun 30 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
webpack 如何同时输出压缩和未压缩的文件的实现步骤
Jun 05 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
星际争霸兵种名称对照表
2020/03/04 星际争霸
使用Smarty 获取当前日期时间和格式化日期时间的方法详解
2013/06/18 PHP
php使用curl检测网页是否被百度收录的示例分享
2014/01/31 PHP
PHP中Fatal error session_start()错误解决步骤
2014/08/05 PHP
Yii中CArrayDataProvider和CActiveDataProvider区别实例分析
2016/03/02 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
微信小程序发送订阅消息的方法(php 为例)
2019/10/30 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
浅谈jQuery hover(over, out)事件函数
2016/12/03 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
Python解释执行原理分析
2014/08/22 Python
python访问系统环境变量的方法
2015/04/29 Python
python中list常用操作实例详解
2015/06/03 Python
Python中利用Scipy包的SIFT方法进行图片识别的实例教程
2016/06/03 Python
Python安装第三方库及常见问题处理方法汇总
2016/09/13 Python
Python3.4实现远程控制电脑开关机
2018/02/22 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
python科学计算之scipy——optimize用法
2019/11/25 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
先进个人事迹材料
2014/01/25 职场文书
消防安全宣传标语
2014/06/07 职场文书
羽毛球比赛策划方案
2014/06/13 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
上班迟到检讨书300字
2014/10/18 职场文书
小学生优秀评语
2014/12/29 职场文书
董事长助理岗位职责
2015/02/11 职场文书
springcloud之Feign超时问题的解决
2021/06/24 Java/Android
JavaScript实例 ODO List分析
2022/01/22 Javascript