Question

我试图让Select2（4.0.0rc1）多值选择框有预加载数据，但它无法正常工作。

HTML

  <select id="sj" class="js-example-basic-multiple form-control" multiple="multiple">
    <option value="1">Tickets</option>
    <option value="2">PArking</option>
    <option value="3">Special Events</option>
    <option value="4">Athletics</option>
  </select>

的JavaScript

$(document).ready(function() {
  $("#sj").select2();
  $("#example tbody").on("click", "tr",function(){
    var defaultData = [{id:1, text:'Tickets'},{id:2,text:'Parking'},{id:3,text:'Athletics'}];
    $("#sj").select2({data:defaultData});
  });

我希望此代码以编程方式预先填充所选项目。

EDIT 我之后的事情：下拉总共有多个N可选项，我点击一行，它最初选择了3个选项，如何做3.5.2的initSelection？可以这样想：我正在使用多选下拉菜单来显示相关的属性，如果它是一项体育赛事，它可能只带有门票，但从现在开始一周我可能想为这个赛事添加停车位，但它需要要记住我已经有与此事件相关的门票

我在3.5.2中完成了以下操作：

initSelection : function (element, callback) {

        var id=$(element).val();
        if (id!=="") {
            $.ajax("index.cfm/tickets/select2get", {
                dataType: 'json',
                data: {
                    nd_event_id: $('#nd_event_id').val(),
                    passes: 'TK,PK,ATH',
                },
            }).done(function(data) { callback(data); });
        }
    },

但由于从输入迁移到选择

，这在4.0.0中不起作用

Answer 1

如果我们将逻辑/代码分成更小的块然后将它们绑在一起更容易理解......如果出现问题，也更容易调试。所以你需要：

下拉项目以（key，value）的格式填充 Select2格式是（id，text）。你有正确的，所以让我们把它放到变量中：

var infoCategory = [
{
    "id": 1,
    "text": "Tickets"
  },
  {
    "id": 2,
    "text": "Parking"
  },
  {
    "id": 3,
    "text": "Special Events"
  },
  {
    "id": 4,
    "text": "Athletics"
  }
];

Select2需要知道我们刚刚创建的下拉项目，它将寻找数据配置以及其他选项。基本上，如果<select>元素没有任何<option>子元素，“data”是您传递给它的配置选项之一。因此，让我们为Select2配置选项创建另一个变量：

var select2Options = {

     "multiple" = false,
     "data" = infoCategory

};

可以在documentation。
中找到默认Select2选项的完整列表

创建<select>元素：

<select id="name="s2select01"></select>

现在，您可以使用配置选项（包括下拉数据）直接初始化Select2，就像您在示例中所做的那样：

$('#s2select01').select2(select2Options);

或者您可以在单击事件中使用上述脚本初始化行并将其绑定到另一个元素，如下所示：

$('#someButtonID').click(function () {

    $('#s2select01').select2(select2Options);

});

我创建了一个verbose demonstration on CodePen，所以你可以看到它们都绑在一起。

Select2 4.0.0多值选择框 - 初始选择

1 个答案: