目录[-] (1)javascript 数组 (2)函数基础 (3)运算符 (4)流程语句 (5)正则表达式 (6)字符串函数 (7)数据类型…
August 8, 2016
jQuery: 操作select option方法集合
每一次操作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").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").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").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方法集合
3 Comments