如何在加载Select2下拉列表中选择多个选项?

时间:2017-01-21 19:41:37

标签: javascript jquery angularjs json select2

我正在尝试将一系列选定项目加载到现有的select2下拉列表中,以便加载时有预先选择的项目,但我很难让我的语法正确。

提供以下json数组,即$ scope.attributes

[{"AttributeId":169,"AttributeName":"Abstract"},
 {"AttributeId":170,"AttributeName":"Animal"},
 {"AttributeId":171,"AttributeName":"Beach"}]

以及创建select2下拉列表的初始代码

$(".attribute-tagging").select2({
    closeOnSelect: true, placeholder: ""
});

以及加载所有可用选项的下拉列表的html标记。

<select class="attribute-tagging" id="edit-attributes" multiple="multiple">
    <option  value="{{attribute.AttributeId}}" ng-repeat="attribute in attributes">{{attribute.AttributeName}}</option>
</select>

这样可行,但我希望已经选择了一个或多个这些项目,因此在页面加载时,所有属性都会添加到选择列表中,然后,例如 - 已选择Animal和Beach。

理想情况下,我可以填充的数组在传入select2下拉列表时会将列表中的某些项标记为“已选择”。

所以,简而言之

  • 基于属性列表
  • 创建Select2下拉列表
  • 从另一个数据源中,将一个包含0个或更多“选定属性”的列表加载到此select2下拉列表中,作为现有选择。
  • 一个更清晰的例子,从1个表中选择列表中的世界100个国家,然后选择Bob(去过另一个表)所有国家用户的数组。

非常感谢任何帮助。

2 个答案:

答案 0 :(得分:3)

试试这段代码。

  var $mySelect = $(".attribute-tagging").select2({
    closeOnSelect: true, placeholder: ""
  });

  $mySelect.val(["169", "171"]).trigger("change");

现在选择摘要和海滩

答案 1 :(得分:1)

您可以使用 id

选择倍数
 $('#edit-attributes').val(["169", "171"]);

$('#edit-attributes').trigger("change");

最后忘记触发更改事件!!!