本文實例分析了jQuery select自動選中功能實現方法。分享給大家供大家參考,具體如下:
//篩選var typeid = "<!--{$typeid}-->";var bigclassid = "<!--{$bigclassid}-->";var smallclassid = "<!--{$smallclassid}-->";$("#typeid option[value="+typeid+"]").attr("selected",true);$("#typeid").change();$("#bigclassid option[value="+bigclassid+"]").attr("selected",true);$("#bigclassid").change();$("#smallclassid option[value="+smallclassid+"]").attr("selected",true);
獲取值后,設置自動選中。
選中之后,調用change()方法。change方法會顯示出下一級的select框。然后再選中,再調用change()方法。這樣就把三級的select框都顯示出來了,并且默認選中了。
$(document).ready(function(){ //ajax級聯 $("#typeid").change(function(){ var id = $(this).val(); setbigclass(id); }); $("#bigclassid").change(function(){ var id = $(this).val(); setsmallclass(id); }); $("#screen_submit").click(function(){ $("#screenform").submit(); });});function setbigclass(id){ var res = ajaxgetbigclass(id); if(res){ myobj = eval(res); var strHtml="<option value=0>全部大類</option>"; for(var i=0;i<myobj.length;i++){ strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>"; } $("#bigclassid").html(strHtml); $("#bigclassid").show().change(); }else{ $("#bigclassid").html('<option value=""></option>').hide(); $("#smallclassid").html('<option value=""></option>').hide(); }}function setsmallclass(id){ var res = ajaxgetsmallclass(id); if(res){ myobj = eval(res); var strHtml="<option value=0>全部子類</option>"; for(var i=0;i<myobj.length;i++){ strHtml+="<option value='"+myobj[i].id+"'>"+myobj[i].name+"</option>"; } $("#smallclassid").html(strHtml); $("#smallclassid").show(); }else{ $("#smallclassid").html('').hide(); }}
更多關于jQuery相關內容感興趣的讀者可查看本站專題:《jQuery表單(form)操作技巧總結》、《jQuery常用插件及用法總結》、《jQuery擴展技巧總結》、《jQuery切換特效與技巧總結》、《jQuery遍歷算法與技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答