基于JQuery的无限分级列表

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

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

 

<select onchange="typeChange(this)">
                            <option value="">
                               请选择类型
                            </option>
                            <s:iterator value="sightTypes">
                                <option value="${id }">
                                     ${typeName }
                                </option>
                           </s:iterator>
                       </select>

 

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

function typeChange(obj){
              var o = $(obj);
               var value = o.val();
            var o_stId = $('#sightTypeId');
               o_stId.val(value);
               o.nextAll().remove();
            if(value != null && value != ""){
                   //有选择 获取下一级
                   $.ajax({
                        type:'POST',
                        url:'地址',
                      data:'npid=' + value,
                      dataType:'json',
                      success:function(msg){
                            if(msg != null && msg.length >0){
                                //有下级数据
                                var addHtml = "<select onchange=\"typeChange(this)\"><option value=\"\">请选择类型</option>";
                                for(var i = 0;i < msg.length;i++){
                                  addHtml += "<option value=\"" + msg[i].id + "\">" + msg[i].typeName + "</option>";
                               }
                                addHtml += "</select>";
                                o.after(addHtml);
                           }else{return;}
24                        }
25                    });
26                }
27            }