二級聯動菜單，簡單實現

/**
 * jQuery Linkage Menu
 *
 * Copyright 2014, sunyingyuan
 * QQ: 1586383022
 * Email: [email protected]
 *
 * 二級聯動菜單
 * 目前只能支持二級聯動，並且只能通過AJAX實時從後臺取數據，如果需要前臺靜態數據，請聯繫作者，暫時沒有需求，有時間再添加
 * 簡單使用方法：
 * HTML代碼：
 * <select id="selectOne">
 *      <option>一級菜單默認顯示名稱</option>
 * </select>
 * <select id="selectTwo">
 *      <option>二級菜單默認顯示名稱</option>
 * </select>
 *
 * JS代碼:
 * 引入jQuery和jquery.linkageMenu.js後
 * $(function(){
 *          $.linkageMenu({
 *              'selectOneId': 'selectOne',//一級菜單Id
 *              'selectTwoId': 'selectTwo',//二級菜單Id
 *              'selectOneVal': '{"key1":"value1", "key2":"value2"}',//一級菜單option值
 *              'paramName' : 'selectOneValue',//請求url的參數key
 *              'getSelectTwoValUrl': 'http://localhost:3000/users'//通過一級菜單的value獲取二級菜單的值的url
 *          });
 * });
 */
(function ($) {
    $.linkageMenu = function (options) {
        //默認參數
        var settings = $.extend({
            'selectOneId': 'selectOne',//一級菜單Id
            'selectTwoId': 'selectTwo',//二級菜單Id
            'selectOneVal': '',//一級菜單option值
            'selectTwoVal': '{"key1":"value2","key2":"value2"}',//預留字段，供插件以後擴展
            'paramName' : 'selectOneValue',//請求url的參數key
            'getSelectTwoValUrl': ''//得到二級菜單的value的url
        }, options);
        var $s1 = $("#" + settings.selectOneId);
        var $s2 = $("#" + settings.selectTwoId);
        var selectOneValJSON = $.parseJSON(settings.selectOneVal);
        //alert(selectOneValJSON.key1);
        //JSON.parse(options.selectOneVal); //由JSON字符串轉換爲JSON對象
        //一級菜單初始化
        $.each(selectOneValJSON, function (key, val) {
            appendOptionTo($s1, key, val);
        });
        //一級菜單改變的時候，二級菜單的變化
        $s1.change(function () {
            $s2.html("");
            var s1SelectedVal = $s1.val();
            //ajax異步獲取二級菜單數據
            $.ajax({
                type: "GET",
                url: settings.getSelectTwoValUrl,
                data: settings.paramName + "=" + s1SelectedVal,
                success: function (select2Val) {
                    var selectTwoValJSON = $.parseJSON(select2Val);
                    $.each(selectTwoValJSON, function (key, val) {
                        appendOptionTo($s2, key, val);
                    });
                }
            });
        });
    }
})(jQuery);
/**
 * Tools Methods : appendOptionTo
 * @param $obj : The selected object jquery，一般爲需要添加option的select對象
 * @param key : option的key，一般爲設置的Id
 * @param val ; option的val，同時一般也作爲顯示的值，在這裏我們默認爲顯示的value和option的value是同一個值
 * @param defaultSelectVal ; 設置默認選中的值，一般爲初始化的情況下，默認選中的value
 */
function appendOptionTo($obj, key, val, defaultSelectVal) {
    var $opt = $("<option>").text(key).val(val);
    if (val == defaultSelectVal) {
        $opt.attr("selected", "selected");
    }
    $opt.appendTo($obj);
}