二、三級聯動菜單，簡單實現（2）

在上次文章中二級聯動菜單，簡單實現寫過一個插件，但是隻支持二級聯動，現在稍稍完善下支持二 、三級聯動

/**
 * jQuery Linkage Menu
 *
 * Copyright 2014, sunyingyuan
 * QQ: 1586383022
 * Email: [email protected]
 *
 * 二級/三級 聯動菜單
 * 支持二級或三級聯動，支持頁面靜態json和AJAX動態從後臺獲取值
 *
 * 簡單使用方法介紹：
 * HTML代碼：
 * <select id="selectOne">
 *      <option>一級菜單默認顯示名稱</option>
 * </select>
 * <select id="selectTwo">
 *      <option>二級菜單默認顯示名稱</option>
 * </select>
 * 如果有三級菜單，同上
 *
 * JS代碼:
 * 引入jQuery和jquery.linkageMenu.js後
 * 其中jquery.linkageMenu.js必須在jQuery之後引入
 *
 * $(function(){
 *          $.linkageMenu({
 *              'selectOneId': 'selectOne', //一級菜單Id
                'selectTwoId': 'selectTwo', //二級菜單Id
                'selectThreeId': '', //三級菜單Id
                'selectOneVal': '', //一級菜單option值
                'selectTwoVal': '', //二級菜單option值
                'selectThreeVal': '', //三級菜單option值
                'selectOneParam': 'selectOneValue', //向後臺獲取二級菜單的值時，一級菜單的參數名稱，默認是selectOneValue
                'selectTwoParam': 'selectTwoValue', //向後臺獲取三級菜單的值時，二級菜單的參數名稱，默認是selectTwoValue
                'getSelectTwoValUrl': '', //得到二級菜單value的url
                'getSelectThreeValUrl': '' //得到三級菜單value的url
 *          });
 * });
 *
 */
(function ($) {
    $.linkageMenu = function (options) {

        //默認參數
        var settings = $.extend({
            'selectOneId': 'selectOne', //一級菜單Id
            'selectTwoId': 'selectTwo', //二級菜單Id
            'selectThreeId': '', //三級菜單Id
            'selectOneVal': '', //一級菜單option值
            'selectTwoVal': '', //二級菜單option值
            'selectThreeVal': '', //三級菜單option值
            'selectOneParam': 'selectOneValue', //向後臺獲取二級菜單的值時，一級菜單的參數名稱，默認是selectOneValue
            'selectTwoParam': 'selectTwoValue', //向後臺獲取三級菜單的值時，二級菜單的參數名稱，默認是selectTwoValue
            'getSelectTwoValUrl': '', //得到二級菜單value的url
            'getSelectThreeValUrl': '' //得到三級菜單value的url
        }, options);

        var $s1 = $("#" + settings.selectOneId);
        var $s2 = $("#" + settings.selectTwoId);
        var $s3 = $("#" + settings.selectThreeId);

        //一級菜單初始化
        _selectValParseJSON($.parseJSON(settings.selectOneVal), $s1);
        //當一級菜單變化時，二級菜單改變option值
        $s1.change(function () {
            _changeMenu($s1, $s2, settings.selectTwoVal, settings.selectOneParam, settings.getSelectTwoValUrl);
            $s2.change();
        });

        //如果有三級菜單，當二級菜單改變時，三級菜單改變option
        if (settings.selectThreeId) {
            $s2.change(function () {
                _changeMenu($s2, $s3, settings.selectThreeVal, settings.selectTwoParam, settings.getSelectThreeValUrl);
            });
        }

        /**
         * Private Methods : _changeMenu
         *
         * 當select組件的value發生改變時，對下一級select組件value產生的影響，即下一級select組件值的改變
         * @param preSelectIdObj : value發生變化的組件的對象
         * @param folSelectIdObj : 由於變化的組件產生影響的下一級組件的對象
         * @param folSelectMenuVal : 下一級組件的靜態值（非AJAX從後臺獲取數據時用）
         * @param getFolSelectMenuValParam : AJAX獲取數據時，向後臺請求的參數
         * @param getFolSelectMenuValUrl : AJAX獲取數據的URL
         * @private
         */
        function _changeMenu(preSelectIdObj, folSelectIdObj, folSelectMenuVal, getFolSelectMenuValParam, getFolSelectMenuValUrl) {
            //preSelectIdObj.change(function () {
            folSelectIdObj.html("");
            var preSelectedVal = preSelectIdObj.val();
            if (folSelectMenuVal) {
                _selectValParseJSON($.parseJSON(folSelectMenuVal), folSelectIdObj);
                return;
            }
            //ajax異步獲取下一級菜單數據
            $.ajax({
                type: "GET",
                url: getFolSelectMenuValUrl,
                data: getFolSelectMenuValParam + "=" + preSelectedVal,
                success: function (val) {
                    _selectValParseJSON($.parseJSON(val), folSelectIdObj);
                }
            });
            //});
        }

        /**
         * Private Methods : _selectValParseJSON
         *
         * 將json填充到指定id的select組件上
         * @param jsonVal : json對象，要填充到select組件上的json對象
         * @param selectId : 要填充的select組件的Id
         * @private
         */
        function _selectValParseJSON(jsonVal, selectId) {
            $.each(jsonVal, function (key, val) {
                _appendOptionTo(selectId, key, val);
            });
        };

        /**
         * Private Methods : _appendOptionTo
         *
         * 將值增加到option組件
         * @param $obj : The selected object jquery，一般爲需要添加option的select對象
         * @param key : option的key，一般爲設置的Id
         * @param val ; option的val，同時一般也作爲顯示的值，在這裏我們默認爲顯示的value和option的value是同一個值
         * @param defaultSelectVal ; 設置默認選中的值，一般爲初始化的情況下，默認選中的value
         * @private
         */
        function _appendOptionTo($obj, key, val, defaultSelectVal) {
            var $opt = $("<option>").text(key).val(val);
            if (val == defaultSelectVal) {
                $opt.attr("selected", "selected");
            }
            $opt.appendTo($obj);
        }
    };
})(jQuery);

以下爲測試HTML

<!DOCTYPE html>
<html>
<head>
    <title>Test Select</title>
    <script src="jquery-1.11.0.js"></script>
    <script src="test.js"></script>
    <script>
$(function(){
    $.linkageMenu({
        'selectOneId': 'selectOne',
        'selectTwoId': 'selectTwo',
        'selectThreeId': 'selectThree',
        'selectOneVal': '{"key1":"value1", "key2":"value2"}',
        //'selectTwoVal': '{"abc":"abc", "abca":"abca"}',
        'selectThreeVal': '{"abc":"abc", "abca":"abca"}',
        'getSelectTwoValUrl': 'http://localhost:8080/getSelect2Val/listAll'
    });
});
</script>
</head>
<body>
	<div>
        <select id="selectOne">
        	<option>一級菜單</option>
        </select>
        <select id="selectTwo">
        	<option>請選擇一級菜單</option>
        </select>
        <select id="selectThree">
        	<option>請選擇二級菜單</option>
        </select>
    </div>
</body>
</html>

git地址爲https://github.com/sunyingyuan/jquery.linkageMenu