最简单的select级联更新

说明：两个select（可以无限多个），第一个为部门选项，第二个为子部门选项。当部门发生改变的时候通过load想后台异步发送当前选中的部门，后台根据当前部门取出相应子部门。

1、html代码部分

<s:select list="modelList1" listKey="id" listValue="name" id="parentDept" cssClass="input  input-auto"

              headerKey="0" headerValue="--请选择部门--" />

<!--这里第一个select用了Struts标签，读者可以自行改变-->

<select class="input  input-auto" id="childDept"></select>

2、导入jQuery，写js。

<script src="../js/jquery.js"></script>

<script type="text/javascript">

        $(function(){

            //监听第一个下拉列表的change事件

            $('#parentDept').on('change', function() {

                //第一个下拉列表的值发生变化，取得变化后的值

                var parentId = $(this).val();

                //本url返回第二个下拉列表的option。（html片段）

                var url = "dept_parent.action?id=" + parentId;

                //将代表option的html片段放到第二个下拉列表中间

                $("#childDept").load(url);
            });

</script>

3、需要load的jsp页面

<%@ page  pageEncoding="utf-8" %>

<%@ taglib prefix="s" uri="/struts-tags"%>

<option value="0">-请选择子部门-</option>

<s:iterator  value="modelList">

  <option value="${id }">${name }</option>

</s:iterator>