<script type="text/javascript" src="https://www.jb51.net/js/news/cascade.js"></script> <tr> <td >请选择分类：</td> <td> <select> <!--{html_options options=$aType selected=$aData.typeid|default:'0'}--> </select> > <select> <!--{html_options options=$aBigClass selected=$aData.bigclassid|default:'0'}--> </select> > <select> <option value="">请选择</option> <!--{html_options options=$aSmallClass selected=$aData.smallclassid|default:'0'}--> </select> </td> </tr>
这样会让文件很清晰。
优化后的js
$(function(){ //ajax级联 $("#typeid").change(function(){ var id = $(this).val(); setbigclass(id); }); $("#bigclassid").change(function(){ var id = $(this).val(); setsmallclass(id); }); }); function setbigclass(id){ var res = ajaxgetbigclass(id); var strHtml; if(res){ myobj = eval(res); 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").hide(); $("#smallclassid").hide(); } } function setsmallclass(id){ var res = ajaxgetsmallclass(id); if(res){ myobj = eval(res); var strHtml = "<option value=''>请选择</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").hide(); } } function ajaxgetbigclass(val){ $.ajax({ type:"POST", async:false, url:"/default/index/ajax/do/ajaxgetbigclass", data:"typeid="+val, success:function(response){ if(response){ res = response; }else{ res = false; } } }); return res; } function ajaxgetsmallclass(val){ $.ajax({ type:"POST", async:false, url:"/default/index/ajax/do/ajaxgetsmallclass", data:"bigclassid="+val, success:function(response){ if(response){ res = response; }else{ res = false; } } }); return res; }
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript中ajax操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》