Question

我正在处理bootstrap-multiselect，我试图在dataprovider方法中添加数据属性。

当前

var options = [
        {label: 'Option 1', title: 'Option 1', value: '1', selected: true},
        {label: 'Option 2', title: 'Option 2', value: '2'}];

在代码中，它会映射<option>标记，如下所示：

$tag = $('<option/>').attr({
                        value: option.value,
                        label: option.label || option.value,
                        title: option.title,
                        selected: !!option.selected,
                        disabled: !!option.disabled
                      });

所需

var options =[
  {
    "label": "Item 1",
    "value": 1,
    "selected": false,
    "attributes": [
      {
        "some-attribute": 10001
      },
      {
        "another-attribute": "false"
      }
    ]
  }
]

因此它将在HTML元素上呈现为data-some-attribute="10001" data-another-attribute="false"。

我开始将这个添加到代码中（我知道它不会起作用）：

$tag = $('<option/>').attr({
                        value: option.value,
                        label: option.label || option.value,
                        title: option.title,
                        selected: !!option.selected,
                        disabled: !!option.disabled,
                        forEach(option.attributes, function(attribute){

                        })
                    });

问题当然是你不能将循环添加为对象属性。一旦这个工作，我可以向存储库添加拉取请求。我确实在回购上问了一个问题，但我决定尝试自己解决这个问题Issue #592 有什么想法吗？

Answer 1

我建议将属性从数组更改为对象，因为属性名称应该是唯一的。它还简化了如何获取元素的数据属性。

data.table

如果您想将其保留为数组，可以执行以下操作：

var attributes = {
  value: option.value,
  label: option.label || option.value,
  title: option.title,
  selected: !!option.selected,
  disabled: !!option.disabled
};

for (key in option.attributes) {
  attributes['data-' + key] = option.attributes[key];
}

$tag = $('<option/>').attr(attributes);

但是，这样做不会带来任何好处并且会带来复杂性。如果每个对象可以有多个键，则代码将需要进一步更改。

Answer 2

您需要先创建元素，然后将属性添加到其中。

所以你的代码应该是这样的：

＆＃13;

var options = [{
  "label": "Item 1",
  "value": 1,
  "selected": false,
  "attributes": [{
    "some-attribute": 10001
  }, {
    "another-attribute": "false"
  }]
}]

console.log(options.length);
$.each(options, function(option) {
  var $tag = $('<option/>').attr({
    value: options[option].value,
    label: options[option].label || options[option].value,
    title: options[option].title,
    selected: options[option].selected,
    disabled: options[option].disabled
  });
  console.dir(option);

  $.each(options[option].attributes, function(att) {
    $tag.attr("data" + Object.keys(att)[0], att[0])
  });
  $("#mySelect").append($tag);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select id="mySelect">

</select>

＆＃13;

动态添加属性作为对象属性

2 个答案: