怎么用ajax实现无刷新级联-Java教程-爱易网页

怎么用ajax实现无刷新级联

日期：2014-05-17　浏览次数：20643 次

如何用ajax实现无刷新级联
下拉框中的数据是在数据库中读取的，读取数据的方法写在当前jsp页面中。
一级下拉框值变动，下一级下拉框的至随之改变。
应该如何实现？

我写的数据能读取出来但是下一级下拉框中的值不会变化，请各位帮忙！
我的js代码：

JScript code

        <script type="text/javascript">
function oneCateChange() {
    var catID = document.getElementById("oneCate").value;
    var docLibID_PUB = document.getElemnetById("docLib_PUB").value;
    /*var url="compareProgram.jsp?catID="+catID;
    location.href = url;*/
    $.ajax( {
        type : "POST",
        url : "compareProgram.jsp",
        data : "catID=" + catID + "&docLibID_PUB=" + docLibID_PUB,
    });
}
</script>

jsp代码

HTML code

<td>
                        一级栏目:
                    </td>
                    <td>
                        <select id="oneCate" onchange="oneCateChange()">
                            <option value="">
                                请选择栏目
                            </option>
                            <%
                                    for (int i = 0; i < cats.length; i++) {
                                        category = cats[i];
                            %>
                            <option value="<%=category.getCatID()%>">
                                <%=category.getCatName()%>
                            </option>
                            <%
                                    }
                            %>
                        </select>
                    </td>
                    <%if(catList.size()>0){%>
                    <td>
                        二级栏目
                    </td>
                    <td>
                        <select id="twoCate">
                            <%
                                    System.out.println(catList.size() + "***");
                                    for (int i = 0; i < catList.size(); i++) {
                                        category = catList.get(i);
                            %>
                            <option value="<%=category.getCatID()%>">
                            <% System.out.println(category.getCatID());%>
                                <%=category.getCatName()%>
                            </option>
                            <%
                                System.out.println(category.getCatName());
                                    }
                            %>

                        </select>
                    </td>
                    <%} %>

------解决方案--------------------
$.ajax( {
type : "POST",
url : "compareProgram.jsp",
data : "catID=" + catID + "&docLibID_PUB=" + docLibID_PUB,
success : fucntion(data){
$("#twoCate").empty();
$("<option value=\"0\">==请选择==</option>").appendTo($select);
for(var i=0;i<data.length;i++){
$("<option value=\""+data[i].getCatID+"\">"+data[i].getCatName+"</option>").appendTo($("#twoCate"));
}
}
});

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

怎么用ajax实现无刷新级联

相关资料更多>

推荐阅读更多>