jQuery select自动选中功能实现方法分析
本文实例分析了jQueryselect自动选中功能实现方法。分享给大家供大家参考,具体如下:
//筛选 vartypeid="<!--{$typeid}-->"; varbigclassid="<!--{$bigclassid}-->"; varsmallclassid="<!--{$smallclassid}-->"; $("#typeidoption[value="+typeid+"]").attr("selected",true); $("#typeid").change(); $("#bigclassidoption[value="+bigclassid+"]").attr("selected",true); $("#bigclassid").change(); $("#smallclassidoption[value="+smallclassid+"]").attr("selected",true);
获取值后,设置自动选中。
选中之后,调用change()方法。change方法会显示出下一级的select框。然后再选中,再调用change()方法。这样就把三级的select框都显示出来了,并且默认选中了。
$(document).ready(function(){ //ajax级联 $("#typeid").change(function(){ varid=$(this).val(); setbigclass(id); }); $("#bigclassid").change(function(){ varid=$(this).val(); setsmallclass(id); }); $("#screen_submit").click(function(){ $("#screenform").submit(); }); }); functionsetbigclass(id){ varres=ajaxgetbigclass(id); if(res){ myobj=eval(res); varstrHtml="<optionvalue=0>全部大类</option>"; for(vari=0;i<myobj.length;i++){ strHtml+="<optionvalue='"+myobj[i].id+"'>"+myobj[i].name+"</option>"; } $("#bigclassid").html(strHtml); $("#bigclassid").show().change(); }else{ $("#bigclassid").html('<optionvalue=""></option>').hide(); $("#smallclassid").html('<optionvalue=""></option>').hide(); } } functionsetsmallclass(id){ varres=ajaxgetsmallclass(id); if(res){ myobj=eval(res); varstrHtml="<optionvalue=0>全部子类</option>"; for(vari=0;i<myobj.length;i++){ strHtml+="<optionvalue='"+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程序设计有所帮助。