jQuery Select下拉框操作小结(推荐)
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下拉框操作小结(推荐),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
- jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
- jQGrid动态填充select下拉框的选项值(动态填充)
- 利用jquery获取select下拉框的值
- 基于jQuery的select下拉框选择触发事件实例分析
- jQuery插件实现可输入和自动匹配的下拉框
- jQuery实现鼠标经过购物车出现下拉框代码(推荐)
- jQuery实现下拉框多选 jquery-multiselect 的实例代码
- jQuery实现下拉框左右移动(全部移动,已选移动)
- jquery仿QQ登录账号选择下拉框效果
- jQuery+PHP+MySQL实现无限级联下拉框效果
- 基于jquery实现下拉框美化特效
- js和jquery分别验证单选框、复选框、下拉框
- 利用jquery实现下拉框的禁用与启用
相关文章
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
这篇文章主要介绍了jQuery+css实现的点击图片放大缩小预览功能,结合实例形式分析了jQuery+css控制图片放大、缩小预览查看的相关操作技巧,需要的朋友可以参考下2020-05-05基于Bootstrap和jQuery构建前端分页工具实例代码
本文给大家介绍基于Bootstrap和jQuery构建前端分页工具实例代码,包括前端分页的优缺点和解决办法,对jquery bootstrap分页知识感兴趣的朋友一起通过本文学习吧2016-11-11jQuery插件ajaxfileupload.js实现上传文件
这篇文章主要为大家详细介绍了jQuery插件ajaxfileupload.js实现上传文件的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下2016-05-05jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一
这篇文章主要介绍了jQuery插件ImgAreaSelect实现头像上传预览和裁剪功能实例讲解一,需要的朋友可以参考下2017-05-05
最新评论