带搜索功能的下拉选择框select2

矫情吗；* 2022-06-04 09:58 636阅读 0赞

api 地址：[ http://select2.github.io/select2/][http_select2.github.io_select2]

<link href="http://select2.github.io/select2/select2-3.5.3/select2.css" rel="stylesheet">
    <script src="http://select2.github.io/select2/select2-3.5.3/select2.js"></script>
    
    
    <script type="text/javascript">  
        $(document).ready(function() {  
          var data = [{ id: 1, text: '中国' }, { id: 2, text: '美国' }, { id: 3, text: '日本' }, { id: 4, text: '加拿大' }];  
          $(".js-selecct-example").select2({  
            data: data,   //填充数据
            placeholder: "选择国家", //填充默认值 
            allowClear:true, //是否允许清空
            multiple: true,  //是否支持多选
            ajax:{
                url:query_data.url, //输入内容会由服务器查找并返回
                dataType: 'json',
                delay:251,
                data:function(params){
                   return {
                       q:param, //输入的内容
                       pagesize:20, //页面大小
                       page:page //当前页
                   };
                },
                results: function (data, page) { 
                    return { results: data.items };
                },
                cache: true
            }
          });  
          $(".js-select-example").select2('val','1')  
        });  
    </script>  
      
    <select class="js-select-example" name="country" multiple="multiple" id="country">  
    </select>

$('\#country').val();

多选结果： \["2", "3"\]

单选结果： 2

效果图如下：

![Center][]

[http_select2.github.io_select2]: http://select2.github.io/select2/
[Center]: /images/20220604/f42e7f107075415faf16ba1779a1be64.png

发表评论取消回复

表情：

评论列表（有 0 条评论，636人围观）

还没有评论，来说两句吧...

相关阅读

相关 select2 使用详解下拉框搜索

【代码】select2 使用详解下拉框搜索。

梦里梦外;/ 2024年05月02日 20:21/ 0 赞/ 31 阅读

相关 Ant Design Vue下拉选择框增加可搜索功能（Ant Design Vue Select选择器）

Ant Design Vue下拉选择框增加可搜索功能打开Ant Design Vue官网，找到[Select选择器（点击进入）][Select]，见如下示例：![在这里插入

末蓝、/ 2022年10月28日 01:29/ 0 赞/ 666 阅读

相关关于select下拉框选择触发事件

我一直以来都认为，select 下拉框选择对选项 options 使用 onclick 注册事件即可，如下： <select> <option val

布满荆棘的人生/ 2022年08月12日 03:00/ 0 赞/ 284 阅读

相关带搜索功能的下拉框select

[Chosen][] 是一个支持jquery的select下拉框美化插件，它能让丑陋的、很长的select选择框变的更好看、更方便。不仅如此，它更扩展了select，增加了自动

柔光的暖阳◎/ 2022年08月01日 13:46/ 0 赞/ 1359 阅读

相关带搜索功能的下拉选择框select2

api 地址：[ http://select2.github.io/select2/][http_select2.github.io_select2]

矫情吗；*/ 2022年06月04日 09:58/ 0 赞/ 637 阅读

相关下拉框、下拉控件Select2的使用

直接新建html文档即可用 <!DOCTYPE html> <html> <head> <meta http-equiv="Co

忘是亡心i/ 2022年05月19日 12:51/ 0 赞/ 273 阅读

相关 bootstrap-select插件实现下拉框搜索功能

工作上要用到在下拉框内实现搜索功能，原生的select标签是不能输入的，所以最终找到了bootstrap-select插件，功能十分强大，支持搜索，多选，分组选中等。本文摘

╰半夏微凉°/ 2022年05月12日 11:06/ 0 赞/ 562 阅读

相关 js控制html下拉框select的选择

分享一下我老师大神的人工智能教程！零基础，通俗易懂！[http://blog.csdn.net/jiangjunshow][http_blog.csdn.net_jiangju

﹏ヽ暗。殇╰゛Y/ 2022年04月17日 04:15/ 0 赞/ 609 阅读

相关 select3:带树级的搜索下拉框插件

效果展示 ![8583_select3.jpg][] -------------------- 功能介绍 select3.js实现以下功能，且调用方便快捷。

红太狼/ 2022年01月06日 05:59/ 0 赞/ 535 阅读

相关 <select>下拉选择框

下拉选择框示例: <select id="DropDownList\_use" class="txt" onchange="selectSort(this.value

布满荆棘的人生/ 2021年10月23日 08:41/ 0 赞/ 498 阅读