selectmenu搜索下拉框实现多级联动,演示三级联动

Posted 2020-10-15 大智如蠢

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

缺点:选择后,在选择不会显示默认勾选的样式

// 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级也一样写........