Question

我使用select2 v4.0.2来创建一个具有可选择＆＃34;组的多选控件＆＃34; （我使用option元素代替optgroup，因为后者根据定义是不可选择的。因此，例如，如果我有一个名为 Fruit 的组，并且其下的选项是 Apple 和 Orange ，则选择 Fruit group item将自动选择其下方的项目。这部分我已经成功地工作了。

然而，我想要做的是强调父母＆＃34;选择其所有子项时，下拉菜单中的选项（即它应该具有灰色＆＃34;选择＆＃34;背景）。这是一个屏幕截图，显示了现在的工作原理（我点击 Fruit 选项让控件进入此状态）：

在下拉菜单中，请注意Apple和Orange均已选中。正如我所料，这些项目也出现在上面的框中。我想要的是Fruit选项在下拉列表中有一个灰色背景（看起来好像被选中），没有出现在上面的框中。像这样的样机：

请注意，此屏幕截图中的差异是＆＃34; parent＆＃34;的突出显示背景。项目。我知道aria-selected属性是推动背景颜色样式的因素，但我似乎无法在该特定列表条目上切换它。我已尝试通过处理select2:open事件以及templateResult函数来执行此操作，但两者均无效。

有没有办法可以在下拉列表中伪造父项的选定对象，而上面的框中没有显示父项？

我目前的代码如下：

的JavaScript

$(document).ready(function() {
  $("#my-select").select2({
    "multiple": true,
    "templateResult": function(data) {
      if(!data.element)
        return data.text;

      var $element = $(data.element);
      var $wrapper = $('<span></span>');
      $wrapper.addClass($element[0].className);
      $wrapper.text(data.text);
      return $wrapper;
    }
  }).on("select2:open", function(e) {
    var curVal = $(this).val();
    var target = e.target;

    for(var i=0; i<target.children.length; i++) {
      var child = target.children[i];
      var kidlist = $(child).attr("data-kids");
      if(kidlist) {
        var kids = $(child).attr("data-kids").split(',');
        var count = 0;
        for(var j=0; j<kids.length; j++) {
          if(curVal && curVal.indexOf(kids[j]) != -1)
            count += 1;
        }

        if(count == kids.length) {
          // This doesn't work!!!
          var results = $("#select2-my-select-results");
          $(results[0].children[i]).attr("aria-selected", true);
        }
      }
    }
  })
  .on("select2:select", function(e) {
    var curVal = $(this).val();
    var el = e.params.data.element;
    var myval = $(el).val();
    var kids = $(el).attr("data-kids");
    if(kids) {
      var pieces = kids.split(',');
      var numKidsSelected = 0;
      for(var i=0; i<pieces.length; i++) {
        if(curVal.indexOf(pieces[i]) != -1) {
          numKidsSelected += 1;
        }
      }

      var notKids = [];
      for(var i=0; i<curVal.length; i++) {
        if(pieces.indexOf(curVal[i]) == -1 &&
           curVal[i] != myval) {
          notKids.push(curVal[i]);
        }
      }

      if(numKidsSelected == pieces.length) {
        $(this).val(notKids).trigger("change"); // Remove the kids
      } else {
        $(this).val(notKids.concat(pieces)).trigger("change");
      }
    }
  });
});

HTML

<select name="my_select" id="my-select" multiple="multiple"
    data-allow-clear="true" data-placeholder="All Items">
    <option value="1" class="bold" data-kids="2,3">Fruit</option>
    <option value="2" class="indent">Apple</option>
    <option value="3" class="indent">Orange</option>
    <option value="4" class="bold" data-kids="5,6">Vegetable</option>
    <option value="5" class="indent">Green Bean</option>
    <option value="6" class="indent">Potato</option>
</select>

以编程方式突出显示select2下拉列表中的选项

0 个答案: