Select bootstrap 中的值基于 jquery 中的数据属性进行多选

Question

我是 jquery/bootstrap 编码方面的新手，想实现以下目标。我有一个带有多个选项的 select（使用 bootstrap Multiselect）。在此列表中，我尝试 select 所有匹配数组值的选项（下面代码中的 list1）。但是，我不需要查看选项的值操作，而是需要检查选项的数据属性（下面代码中的列表 2）。

我的下拉菜单

<form>
  <select class="form-control" id="list1" multiple="multiple">
    <option data-vendorid="001" value="001">some-value-1</option>
    <option data-vendorid="002" value="002">some-value-2</option>
    <option data-vendorid="003" value="003">some-value-3</option>
  </select>

  <select class="form-control" id="list2" multiple="multiple">
    <option data-vendorid="001" value="some-value-1">some-value-1</option>
    <option data-vendorid="002" value="some-value-2">some-value-2</option>
    <option data-vendorid="003" value="some-value-3">some-value-3</option>
  </select>
</form>

我的脚本

var arr = [{
    "attr-1": "attr-value-1",
    "attr-2": "attr-value-2",
    "id": "001"
}, {
    "attr-1": "attr-value-1",
    "attr-2": "attr-value-2",
    "id": "003"
}];

//If I look for the default value, it works:
for (var i = 0; i < arr.length; i++) {
    $('#list1').multiselect('select', arr[i].id);
}

//So I tried something like this, but can't figure it out
for (var i = 0; i < arr.length; i++) {
    $('#list2').multiselect('select', $(arr[i]).data('vendorid'));
}

检查my updated fiddle！

非常感谢帮助

Answer 1

使用

$('#list2').multiselect('select', $(arr[i]).data('id'));

.data()是jquery提供的函数，所以需要先select使用$的数组元素

Answer 2

根据您的评论，我认为您正在尝试进行这样的数据映射：

var map = {};
$('#list2').find('option').each(function(index, elem) {
    map[$(elem).data('id')] = elem.value;
});

for (var i = 0; i < arr.length; i++) {
    $('#list2').multiselect('select', map[arr[i]['id']]);
}

根据 docs of the multiselect jQuery plugin，.multiselect('select', String|Array) 方法需要选择字符串或选项值数组。当您尝试根据其他属性进行选择时，您必须制作一个 "dictionary" 将存储的记录映射到选项值。这就是上面的例子所做的。

更新：
我刚刚更新了代码以反映您 Fiddle.

中的确切属性名称

Select bootstrap 中的值基于 jquery 中的数据属性进行多选

Select values in bootstrap multiselect based on data attributes in jquery

javascript

jquery

bootstrap-multiselect