selectmenu搜索下拉框實現多級聯動,演示三級聯動

注意的是:修改了作者的源碼;但是其他地方用到就得注意了,最好在復制個文件里面改;

缺點:選擇后,在選擇不會顯示默認勾選的樣式

// selectmenu.js
    /**
     * 控件初始化入口
     * @global
     * @memberof jQuery,bootstrap2,bootstrap3
     * @param option {Object} 初始化參數集
     */
    function Plugin(option) {
        return this.each(function(){
            var $this = $(this),
                data = '',  //<----注意這里 初始化 data一直讓他為空 不緩存
                params = $.extend({}, defaults, $this.data(), data && data.option ,typeof option === 'object' && option);
            if(!data) $this.data(SelectMenu.dataKey,(data =  new SelectMenu(this,params)));
            else{
                if(data.isVisible(data)) data.hideResults(data);
                else data.showMenu(data);
            }
        });
    }

//第一級聯動
var proArr = '<?=$proArr?>'; //PHP JSON數據
        var pro_Arr = JSON.parse(proArr);
        var selectMenuData = pro_Arr;

        $('#btnMenu').click(function(){  //點擊第一級 觸發插件
            $(this).selectMenu({
                title:'<i class="Hui-iconfont">&#xe709;</i>&nbsp;搜索省',
                showField : 'name',
                keyField : 'fid',
                //search : true,
                //orderBy : ['fid asc'],
                //initSelected : 0,
                arrow : true,
                //initSelected : 1,
                data : selectMenuData,
                eSelect : function(data){
                    if(data && data.length > 0){
                        $('#btnMenu').text(data[0].name);
                        $('#city').text('選擇');
                        $('#hoslist').text('選擇');
                        $('#hoslist').data('hosselect',' ');
                        var fid = data[0].fid;
                        changecity(fid);  //觸發2級
                    }
                }
            });
        });

//一級觸發完 觸發2級獲取數據
function changecity(fid)
{
    var url = "<?= site_url('hosm/hoss') ?>";
    $.ajax({
         type: "POST",
         url: url,
         data:"&fid="+fid,
         success: function(msg)
         {
            var pro_Arr = JSON.parse(msg);
             selectMenuDatab = pro_Arr;
         }
     }) ;
}
//2級點擊 觸發3級
$('#city').click(function(){
    $(this).selectMenu({
        title:'<i class="Hui-iconfont">&#xe709;</i>&nbsp;搜索市',
        showField : 'name',
        keyField : 'fid',
        //search : true,
        arrow : true,
        //orderBy : ['fid asc'],
        data : selectMenuDatab,
        eSelect : function(data){
            if(data && data.length > 0){
                $('#city').text(data[0].name);
                var fid = data[0].fid;
                $('#hoslist').text('選擇');
                $('#hoslist').data('hosselect',' ');
                changlisthos(fid); //調用3級聯動

            }
        }
    });
});

3級跟2級一樣寫,4級也一樣寫........