JS三级联动（一）

页面

<div>
        <select id="level_1" class="input select" name="parent.parent.id"> 
            <option value="">--请选择--</option> 
        </select> 
        <select id="level_2" class="input select" name="parent.id"> 
            <option value="">--请选择--</option> 
        </select> 
        <select id="level_3" class="input select" name="id"> 
            <option value="">--请选择--</option> 
        </select>
    </div>

CSS

.input {
    line-height: 30px;
    font-size: 12px;
    border-width: 1px;
    border-style: solid;
    border-color: #D8D8D8 #E5E5E5 #E5E5E5 #D8D8D8;
    -moz-border-top-colors: none;
    -moz-border-right-colors: none;
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    border-image: none;
    box-shadow: 2px 3px 3px #F6F8F9 inset;
    outline: medium none;
    transition-property: background-color, color, width, border-color;
    transition-duration: 0.5s;
    vertical-align:middle;
}

.select {
    min-width: 65px;
    height: 30px;

    cursor: pointer;
    background: transparent url("../image/cussel_normal_f935c695.png") no-repeat scroll right center;
    margin-right: 10px;
    **-moz-appearance: none;**/*隐藏下拉右边的下三角*/

    padding: 0px 25px 0px 4px;
    -moz-user-select: none;

    display: inline-block;
    white-space: nowrap;
}

CSS用到的背景图片

JS

<script type="text/javascript">
    $(document).ready(function () { 
        /* 获取值，新增时初始值全为空，编辑时初始值用实际值 */
        var v1 = "";/*var v1 = "${model.parent.parent.id}";*/
        var v2 = "";/*var v2 = "${model.parent.id}";*/
        var v3 = "";/*var v3 = "${model.id}";*/
           var url = "<%=basePath%>category/getCategoryWithJsonFormat.do";

        /* 初始化一级下拉 */ 
        $.post(url, {"pid":0}, function (data) { 
            var jsonObj = eval("(" + data + ")"); 
            for (var i = 0; i < jsonObj.length; i++) { 
                var $option = $("<option></option>"); 
                $option.attr("value", jsonObj[i].id); 
                $option.text(jsonObj[i].name); 
                $("#level_1").append($option); 
            } 
            $("#level_1").val(v1);
            $("#level_1").change();
        }); 

        /* 根据一级值初始化二级下拉 */ 
        $("#level_1").change(function () {
            /* 设置新值 */
            v1 = $("#level_1").val();
            /* 移除旧二级下拉 */ 
               $("#level_2 option[value!='']").remove(); 
               $("#level_2").val("");
               /* 移除旧三级下拉 */ 
               $("#level_3 option[value!='']").remove();
               $("#level_3").val("");
               /* 设置新二级下拉*/
            $.post(url, {"pid":$("#level_1").val()}, function (data) { 
                var jsonObj = eval("(" + data + ")"); 
                for (var i = 0; i < jsonObj.length; i++) { 
                    var $option = $("<option></option>"); 
                    $option.attr("value", jsonObj[i].id); 
                    $option.text(jsonObj[i].name); 
                    $("#level_2").append($option); 
                }
                $("#level_2").val(v2);
                $("#level_2").change();
            }); 
        }); 

        /* 根据二级值初始化三级下拉 */ 
        $("#level_2").change(function () { 
            /* 设置新值 */
            v2 = $("#level_2").val();
            /* 移除旧三级下拉 */ 
               $("#level_3 option[value!='']").remove(); 
               $("#level_3").val("");
               /* 设置新三级下拉*/
            $.post(url, {"pid":$("#level_2").val()}, function (data) { 
                var jsonObj = eval("(" + data + ")"); 
                for (var i = 0; i < jsonObj.length; i++) { 
                    var $option = $("<option></option>"); 
                    $option.attr("value", jsonObj[i].id); 
                    $option.text(jsonObj[i].name); 
                    $("#level_3").append($option); 
                } 
                $("#level_3").val(v3);
                $("#level_3").change();
            }); 
        }); 

        /**/
        $("#level_3").change(function () { 
            /* 设置新值 */
            v3 = $("#level_3").val();
        }); 
    });
    </script>

Controller

@Controller
@RequestMapping(value = "/category")
public class CategoryController extends BaseController<CategoryModel> {

    @RequestMapping(value = "/getCategoryWithJsonFormat.do", method = RequestMethod.POST)
    @ResponseBody
    public String getCategoryWithJsonFormat(@RequestParam(value = "pid") final Integer pid) {
        String where = "where pid = ?";
        Object[] params = new Integer[]{pid};
        List<CategoryModel> list = categoryDao.find(pageNo, pageSize, where, params).getList();

        // http://javacrazyer.iteye.com/blog/714127
        JsonConfig config = new JsonConfig();
        config.setJsonPropertyFilter(new PropertyFilter() {

            @Override
            public boolean apply(Object source, String name, Object value) {
                // TODO Auto-generated method stub
                if (name.equals("children") || name.equals("parent")) {
                    return true;
                }
                return false;
            }
        });

        JSONArray jsonArray = JSONArray.fromObject(list, config);
        return jsonArray.toString();
    }
}

Mapping

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE hibernate-mapping PUBLIC 
    "-//Hibernate/Hibernate Mapping DTD 3.0//EN" 
    "http://hibernate.sourceforge.net/hibernate-mapping-3.0.dtd" >
<hibernate-mapping package="com.ais.cms.model">
    <class name="CategoryModel" table="t_category">
        <id name="id">
            <generator class="native"/>
        </id>
        <property name="name" not-null="true" length="50"/>
        <property name="level" not-null="true" length="11"/>
        <!-- 映射父节点 -->
        <many-to-one name="parent" column="pid"/>
        <!-- 映射子节点 -->
        <set name="children" inverse="true" lazy="extra" cascade="all" order-by="id">
            <key column="pid"/>
            <one-to-many class="CategoryModel"/>
        </set>
    </class>
</hibernate-mapping>

Model

public class CategoryModel implements Serializable
{
    private static final long serialVersionUID = 1L;
    private Integer id;
    private String name;
    private int level;
    private Set<CategoryModel> children;
    private CategoryModel parent;

    /*省略getter setter方法*/
}

数据库设计

效果

其他参考
http://www.cnblogs.com/dingyingsi/archive/2013/02/26/2933565.html