0

我正在研究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 上提出了一个问题，但决定自己尝试解决问题 #592有 什么想法吗？

4

2 回答 2

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

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

于 2015-08-01T12:21:11.560 回答
1

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

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

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>

于 2015-08-01T12:58:35.467 回答