每一次操作select的时候,总是要谷歌一下资料,真是太不爽了, 在这里记录一下。
公共select代码
<select id="sel"> <option value="gideon">gideon</option> <option value="lisha">lisha</option> <option value="samuel">samuel</option> <option value="nathan">nathan</option> <option value="noah">noah</option> <option value="ikeepstudying">ikeepstudying</option> </select>
jQuery对select的取值
//获取第一个option的值 $('#sel option:first').val(); //最后一个option的值 $('#sel option:last').val(); //获取第二个option的值 $('#sel option:eq(1)').val(); //获取选中的值 $('#sel').val(); $('#sel option:selected').val(); //获取选中项的显示的文本值 $("#sel").find("option:selected").text(); //获取select的长度 $('#sel option').length; //获取Select选中的索引值 $("#sel").get(0).selectedIndex; //获取Select最大的索引值 $("#sel option:last").attr("index");
jQuery对select的赋值
//设置text为pxx的项选中 sel.find("option[text='nathan']").attr("selected",'selected'); //设置值为2的option为选中状态 $("#sel").val(2); $('#sel').attr('value','2'); //设置最后一个option为选中 $('#sel option:last').attr('selected','selected'); $("#sel").attr('value' , $('#test option:last').val()); $("#sel").attr('value' , $('#test option').eq($('#test option').length - 1).val()); //设置Select索引值为1的项选中 $("#sel ").get(0).selectedIndex=1; //设置Select的Text值为jQuery的项选中 $("#sel option[text='jQuery']").attr("selected", true); //设置select的value值为1时被选中 $("#sel option[value='1']").attr("selected", true);
select的事件
//为select添加事件,当选择其中一项时触发 $("#sel").change(function(){... });
jQuery操作select的方法
//为Select追加一个Option(下拉项) $("#sel").append("<option value='Value'>Text</option>"); //为Select插入一个Option(第一个位置) $("#sel").prepend("<option value='0'>请选择</option>"); //删除Select中索引值最大Option(最后一个) $("#sel option:last").remove(); //删除Select中索引值为0的Option(第一个) $("#sel option[index='0']").remove(); //删除Select中Value='3'的Option $("#sel option[value='3']").remove(); //删除Select中Text='4'的Option $("#sel option[text='4']").remove(); //循环select的option选项 $("#sel option").each(function(){ if($(this).text()=="ikeepstudying"){ $(this).attr("selected", true); } });
jQuery中select联动
//select 的 联动 $(".selector1").change(function(){ // 先清空第二个 $(".selector2").empty(); // 实际的应用中,这里的option一般都是用循环生成多个了 var option = $("<option>").val(1).text("pxx"); $(".selector2").append(option); });
jQuery中select排序 ( 参看: DEMO )
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> //, attr, order var sortSelect = function (select, attr, order) { if(attr === 'text'){ if(order === 'asc'){ $(select).html($(select).children('option').sort(function (x, y) { return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1; })); $(select).get(0).selectedIndex = 0; e.preventDefault(); }// end asc if(order === 'desc'){ $(select).html($(select).children('option').sort(function (y, x) { return $(x).text().toUpperCase() < $(y).text().toUpperCase() ? -1 : 1; })); $(select).get(0).selectedIndex = 0; e.preventDefault(); }// end desc } }; //, attr, order $(document).ready(function () { $('#btnSort').click(function (e) { sortSelect('#ddlList', 'text', 'asc'); }); // event listener click }); </script> <select id="ddlList"> <option value="3">Three</option> <option value="1">One</option> <option value="1">one</option> <option value="1">a</option> <option value="1">b</option> <option value="1">A</option> <option value="1">B</option> <option value="0">Zero</option> <option value="2">Two</option> <option value="8">Eight</option> </select> <input type="button" id="btnSort" Value=" Sort Dropdown By Text " />
参看: DEMO
更多参考:
jQuery: 插件开发模式详解 $.extend(), $.fn, $.widget()
原文: jQuery: 操作select option方法集合
相关推荐
这个文档是本人在开发学习中下的别人的资料,觉得汇总的很好,后面在工作过程中修改了一些,非常有用,尤其是前端的,基本上对select option的操作都在这里面了。有收藏价值。
jquery获得select option值
Jquery Select操作方法集合脚本之家特别版
举例说明如何通过JQuery操作select
jQuery获取Select选择的Text和Value: 代码如下: $(“#select_id”).change(function(){//code…}); //为Select添加事件,当选择其中一项时触发 var checkText=$(“#select_id”).find(“option:selected”).text(); ...
接下来,你可以创建获取数据集的方法,让前端jQuery执行的方法: ok,一切准备就绪。 创建一个select对象: $selectCity = $(‘<select />’).attr({ name: ‘city’, class: ‘selectcity’ }); 你可以创建一...
如下所示: var selector=$('<select></select>...以上这篇JQuery动态添加Select的Option元素实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持软件开发网。
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
Jquery中对下拉框的操作 包括选中 赋值等
jquery select2 select美化插件
使用jquery技术实现 两个select之间option的转移操作,支持全选、单选、删除操作,代码简单,功能强大,拿过来就能用哦!内附效果截图
美化了单选框和复选框丑丑的问题,具体使用文档参考:http://blog.csdn.net/qq_19558705/article/details/49978731
jQuery获取Select标签的手册 单选组radio: $("input[type=radio][checked]").val(); 下拉框select的value值: $('select').val(); 下拉框select选中的text 值:$("select").find("option:selected").text();
jquery 常用方法集合(没有例子,只是方法名)
Jquery combo-select
Jquery操作select标签:包含选中、更改选中;获取选中option的text值、value值和ndex索引值;标签的清空、删除和增加等。
简单实用的jquery select2组件
NULL 博文链接:https://effort-fan.iteye.com/blog/1214681
jquery获得selectoption值[文].pdf
下面小编就为大家带来一篇jQuery为动态生成的select元素添加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧