基于JQuery的无限分级列表

声明:本文章系Jarvis原创,转载请注明!

这是html代码,大家看个意思就可以.

 1 < select  onchange ="typeChange(this)" >
 2                              < option  value ="" >
 3                                 请选择类型
 4                              </ option >
 5                              < s:iterator  value ="sightTypes" >
 6                                  < option  value ="${id }" >
 7                                     ${typeName }
 8                                  </ option >
 9                              </ s:iterator >
10                          </ select >

主要思路:
1.列出一级列表
2.AJAX查找一级列表是否有下级 有增加一个select

 1 function  typeChange(obj) {
 2                var o = $(obj);
 3                var value = o.val();
 4                var o_stId = $('#sightTypeId');
 5                o_stId.val(value);
 6                o.nextAll().remove();
 7                if(value != null && value != ""){
 8                    //有选择 获取下一级
 9                    $.ajax({
10                        type:'POST',
11                        url:'地址',
12                        data:'npid=' + value,
13                        dataType:'json',
14                        success:function(msg){
15                            if(msg != null && msg.length >0){
16                                //有下级数据
17                                var addHtml = "<select onchange=\"typeChange(this)\"><option value=\"\">请选择类型</option>";
18                                for(var i = 0;i < msg.length;i++){
19                                    addHtml += "<option value=\"" + msg[i].id + "\">" + msg[i].typeName + "</option>";
20                                }
21                                addHtml += "</select>";
22                                o.after(addHtml);
23                            }else{return;}
24                        }
25                    });
26                }
27             }