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

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){

                        })
                    });

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

Answer 1

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

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);

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

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

for (var i = 0; i < option.attributes.length; i++) {
  var key = Object.keys(option.attributes[i])[0],
      val = option.attributes[i][key];

  attributes['data-' + key] = val;
}

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

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

Answer 2

您需要先创建元素，然后再向其添加属性。

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

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);
});

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

<select id="mySelect">

</select>

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

Dynamically add attributes as object properties

javascript

jquery

bootstrap-multiselect