用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的标签的，可以使页面代码更加明朗易懂。