当前位置导航:炫浪网>>网络学院>>编程开发>>JAVA教程>>Java进阶

基于JQuery的无限分级列表

    这是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

 1function 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            }
相关内容
赞助商链接