如何利用Bootstrap样式生成可搜索下拉框

Posted 2023-04-11

相应目录里（css和js文件夹），创建静态页面index.html，如下图所示：

第二步，在index.html页面中引入select2相关的css和js文件，并将jquery核心js引入，如下图所示：

第三步，在body标签内部插入一个div标签，然后在div标签内插入一个select标签并添加多个option，如下图所示：

第四步，在script标签内初始化调用select2()方法，直接利用select下拉框的id进行初始化，如下图所示：

第五步，直接选择浏览器进行预览，可以选择下拉框中的选项，如下图所示：

第六步，修改下拉框样式，输入选项中每个字符，可以搜索出包含这个字符的所有选项，如下图所示： 参考技术A 相应目录里（css和js文件夹），创建静态页面index.html
第二步，在index.html页面中引入select2相关的css和js文件，并将jquery核心js引入
第三步，在body标签内部插入一个div标签，然后在div标签内插入一个select标签并添加多个option
第四步，在script标签内初始化调用select2()方法，直接利用select下拉框的id进行初始化
第五步，直接选择浏览器进行预览，可以选择下拉框中的选项
第六步，修改下拉框样式，输入选项中每个字符，可以搜索出包含这个字符的所有选项

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