二級聯動菜單，簡單實現

/** * jQuery Linkage Menu * * Copyright 2014, sunyingyuan * QQ: 1586383022 * Email: yingyuansun@163.com * * 二級聯動菜單 * 目前只能支援二級聯動，並且只能通過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);}