用js实现级联显示

       其实就两个地方，一个是用来显示级联的html文件，一个是js的方法用局部刷新的方法把数据传回来并刷新。因为没有很多时间去写，所以大家看的懂的就看，我就是为了做个记录而已。

      在这里我用了strut2的标签和ajax的异步调用。

      假如你要显示的，一个是省，  一个是市。你要省的List<province>{id, name}和一个省里面全部市的集合List<city>{id, name}

     好吧，下面就贴代码吧！！

     html部分：

     <tr>
            <td>
                <s:select name="systemName" id="systemId" onchange="updateChildTypeContent();" list="systemVoList" listKey="id" listValue="systemName"  cssClass="select"/>(systemName跟action里面的值对应， list存放数据源的list，listKey和listValue对应数据源的两个属性)
                <c:if test="${null != subSystemVoList}">
                    <select name="subSystemId" id="subSystemId"  class="select">
                                <c:forEach items="${subSystemVoList}" var="subSystemVo">
                                    <option id="${subSystemVo.id}" value="${subSystemVo.id}" selected="${subSystemName} }">${subSystemVo.subSystemName}</option>
                                </c:forEach>
                        </select>
                </c:if>     
            </td>
                
        </tr>

    js部分：

function updateChildTypeContent(){
    var selectedValue = $('#systemId').val();
    //第一步：移除所有下级选择框
    var typeTr = $("#subSystemId");
    typeTr.empty();
    //第二步：如果选项值不为空 ,添加下一级选择框的值
    if(selectedValue != null && "" != selectedValue){
        var requestUrl = "http://baidu.com";//这里是拿数据的地址
        $.ajax({
            async : false,
            type : "post",
            url : requestUrl,
            dataType : "json",
            data : {
                systemId:selectedValue// 传进去的值
            },
            success : function(jsonData) {
                var select = jsonData;                
                if(select != null && select != "" && select.length > 0){//如果子列表有值则把值赋上去
                    var tr = ""
                    for(var i = 0 ; i < select.length ; i ++){                        
                        tr = tr + "<option value='" + select[i].id + "'>" + select[i].subSystemName + "</option>";
                    }
                    $('#subSystemId').append(tr);
                }
            }
        });
    }

总结：其实父子页面都是可以直接用struts的标签的，可以使页面代码更加明朗易懂。