Question

我使用了很棒的select2来创建一个多选组合。

我想以编程方式选择默认值（如用户先前所做的选择），但我不知道如何。我读到使用initSelection可以解决这个问题，但是在创建组合时会调用它，我不希望总是这个默认选择。

Answer 1

版本4.x中的正确解决方案：

$('#element').val(['val1','val2']).trigger('change');

请参阅：Creator description

Answer 2

我找到了一些解决方案，也许会对你有所帮助：

$('#el').select2({...}) // init select2

var defaultData = [{id:1, text:'Item1'},{id:2,text:'Item2'},{id:3,text:'Item3'}];

$('#el').data().select2.updateSelection(defaultData);

Answer 3

从文档页面：

“ val - 获取或设置选择。如果未指定value参数，则返回当前所选元素的id属性。如果指定了value参数，则它将成为当前选择。“

另外，来自文档：

$("#e8").select2("val", "CA");

Answer 4

正如文档here中所述，您只需添加＆＃39;选项＆＃39;选择标记以预先选择初始默认值。

<select class="js-data-example-ajax">
  <option value="3620194" selected="selected">select2/select2</option>
</select>

Answer 5

$('#el').select2().val(['val1','val2']).trigger("change")

可以解决问题，但由于某些原因，它会删除添加自己标记的功能......

Answer 6

我循环遍历一组值，然后设置匹配的每个选项（“selected”，true）

values = [2, 5, 3]

for val in values
  $("#selects_id option[value="+val+"]").prop("selected",true).trigger("change")

您也可以使用从Ajax调用中获得的结果。

Answer 7

以下代码可以正常工作，但需要刷新select2

$('#el').data().select2.updateSelection(defaultData);

Answer 8

延长@sanj的答案。在我的项目中，这似乎对我有用。

通过HTML

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1" selected>One</option>
    <option val="2" selected>Two</option>
    <option val="3">Three</option>
</select>

JS

$('.select2').select2();

结果

通过Javascript

HTML

<select class="select2" style='width:100%;' multiple>
    <option val=''>Please choose</option>
    <option val="1">One</option>
    <option val="2">Two</option>
    <option val="3">Three</option>
</select>

JS

$('.select2').select2();
var defaultData = [{id:1, text:'One'},{id:2,text:'Two'}];
$('.select2').data().select2.updateSelection(defaultData);

结果

Answer 9

终于搞清楚了!! Select2遍历<select>下的<select class="js-data-example-ajax" style="width:100%"> <option value="3620194" selected="selected">Put the pre-selected options here</option> </select>标记。

<option>

repo.text的内部html被放入文本键下的repo对象中。所以repo.text会给出innerhtml。也就是说，我们所要做的就是向init中的formatSelection选项提供text。从servlet（控制器）传递的json也应该在>>> def cumsum(n): ... if n == 1: ... return n ... else: ... return n + cumsum(n - 1) ... >>> cumsum(5) 15 >>> 1+2+3+4+5 15键下放置所需的标签文本!! 仍在弄清楚如何为创建的li元素添加属性，以便我可以保存更改的列表。有什么想法吗？

Answer 10

<select class="form-control" id="selectid" name="selectid"></select>

$('#selectid').select2({
placeholder: 'Please Search with ID',
ajax: {
url: '/getData.php',
dataType: 'json',
delay: 250,
processResults: function (data) {
    return {
        results: data
    };
},
cache: true
}
});

var id    = "idvalue";
var text  = "Text String";
if(id !== null && id !== ''){
    var studentSelect = $('#selectid');
    $.ajax({
        type: 'GET',
        url: '/getData.php'
    }).then(function (data) {
        var option = new Option(id, text, true, true);
        studentSelect.append(option).trigger('change');
        studentSelect.trigger({
            type: 'select2:select',
            params: {
                data: data
            }
        });
    });
}

Answer 11

你可以在这里使用JQuery Select2找到一个自动完成，multiple selection Drop-down list的解决方案。

使用HTML“select”元素绑定数据，然后由“Select2”函数接管，将其转换为漂亮的多选下拉列表。

使用AJax可能会表现良好，并且肯定会在未来几天内尝试。

select2：使用AJAX进行多选的默认选择

11 个答案: