select2的使用（Version: 3.5.4）

最新推荐文章于 2025-05-30 11:47:20 发布

烟雨客栈

最新推荐文章于 2025-05-30 11:47:20 发布

阅读量4.7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：表单文章标签： select2

本文链接：https://blog.youkuaiyun.com/qq_30152271/article/details/51372867

表单专栏收录该内容

4 篇文章

订阅专栏

本文介绍了如何使用Select2组件实现动态加载数据并设置初始选中项的方法，包括两种实现方式：一种是通过直接操作DOM来添加选项，另一种是利用Select2的Ajax特性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入需要的文件：

<script src="${ctxStatic}/js/select2/select2.js" type="text/javascript"></script>
<script src="${ctxStatic}/js/select2/select2_locale_zh-CN.js" type="text/javascript"></script>
<link href="${ctxStatic}/js/select2/select2.css" type="text/css" rel="stylesheet" />

方法一：

页面元素：

<select id="confButtons" name="confButtons" multiple="multiple" class="js-example-basic-multiple"></select>

js代码：

$.ajax({
      url: ctxAdmin + '/act/node/buttonSelect2',
      type: 'post',
      data: {
          sign: (firstNode == 'true' ? irst':'Normal'),
          processDefinitionKey:processDefinitionKey},
          dataType: 'json',
          success: function (data) {
                $.each(data['rows'],function(i,row){
                        $("#confButtons").append('<option value="'+row['id']+'">'+row['text']+'</option>');
                    });
                $.each(buttons.split(","),function(i,button){ //buttons是传进来的参数，是默认选中的选项的value，多个value由逗号分隔的字符串
                    $("#confButtons").find("option[value='"+button+"']").prop("selected","true");
                });
                $("#confButtons").select2();         
            }
        });

方法二：

页面元素：

//value不可省略
<input id="confButtons" name="confButtons" type="text" class="input-xlarge" value=" "/>

js代码：

            var $select=$("#confButtons");
            var array=[];
            $select.select2({
                multiple:true,
                allowClear: true,
                minimumResultsForSearch: Infinity,
                closeOnSelect: false,    //选择一项后不自动关闭下拉框
                ajax: {
                    url: ctxAdmin + '/act/node/buttonSelect2',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term, // search term
                            sign:(firstNode == 'true' ? 'First':'Normal'),
                            processDefinitionKey:processDefinitionKey
                        };
                    },
                    results: function (data,params) {
                        params.page = params.page || 1;
                        return {
                            results: data['rows'],
                            pagination: {
                                more: (params.page * 30) < data['total']
                            }
                        };
                    },
                    cache:true
                },
                initSelection: function (element,callback) {
                    $.each(buttons.split(","),function(i,button){
                        array[i]={
                            text:button,
                            id:button
                        }
                    });
                    if(buttons){
                        callback(array);   //初始化选中的选项
                    }
                }
            });