Jquery对select的增、删、改、查操作
逃不开传统的四种操作:增、删、改、查。
<四处搜刮了jquery对select操作的代码,汇集一下,方便以后查看。日历天数变化代码为原创。>
[增]:
$("#select_id").append("<optionvalue='Value'>Text</option>");//为Select追加一个Option(下拉项) $("#select_id").prepend("<optionvalue='0'>请选择</option>");//为Select插入一个Option(第一个位置)
[删]:
$("#select_idoption:last").remove();//删除Select中索引值最大Option(最后一个) $("#select_idoption[index='0']").remove();//删除Select中索引值为0的Option(第一个) $("#select_idoption[value='3']").remove();//删除Select中Value='3'的Option $("#select_idoption[text='4']").remove();//删除Select中Text='4'的Option $("#select_id").empty();//清空
[改](设置选中项):
$("#select_id").get(0).selectedIndex=1;//设置Select索引值为1的项选中 $("#select_id").val(4);//设置Select的Value值为4的项选中 $("#select_idoption[text='jQuery']").attr("selected",true);//设置Select的Text值为jQuery的项选中
[查](获取选中值):
1.获取选中项的value
$("#select_id").val();//获取选中项的value $("#select_id").get(0).selectedIndex;//获取选中项的索引值 $("#select_id").find("option:selected").text();//获取选中项的text $("#select_idoption:last").attr("index");//获取Select最大的索引值
附上代码样例,代码功能为根据实际选择的“年”、“月”,来改变select“日”中option的天数。
使用php编写,默认$("select.day")初始有31天,因为默认为1月:
<selectname="date_year"class="year">//年 <?php for($year=1990;$year<=date("Y");++$year){ ?> <optionvalue="<?phpecho$year;?>"><?phpecho$year;?></option> <?php } ?> </select>
<selectname="date_month"class="month">//月 <?php for($month=1;$month<=12;++$month){ ?> <optionvalue="<?phpecho$month;?>"><?phpecho$month;?></option> <?php } ?> </select>
<selectname="date_day"class="day">//日 <?php for($day=1;$day<=31;++$day){ ?> <optionvalue="<?phpecho$day;?>"><?phpecho$day;?></option> <?php } ?> </select>
jquery代码:
$(document).ready(function(){ $("select.month,select.year").change(function(){//"年"、"月"的变化都可能引起“日”的变化 $("select.day").empty();//非常重要,要先清空 for(vari=1;i<31;i++){ varoption=$("<option>").val(i).text(i); $("select.day").append(option); } varmonth=$("select.month").val(); if((month%2&&month<8)||(month%2===0&&month>7)){ $("select.day").append("<optionvalue='31'>31</option>");//天数为31天的append一个option } if(month===2){ $("select.dayoption:last").remove(); $("select.dayoption:last").remove();//2月天数28 varyear=$("select.year").val(); if((year%4===0&&year%100)||year%400===0) $("select.day").append("<optionvalue='29'>29</option>");//闰年2月天数加一 } }); });
以上就是关于jQuery实现对select的增、删、改、查操作总结,希望大家能够喜欢。