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

我使用创建一个多选控件，该控件具有可选择的组。我使用选项元素代替optgroup，因为根据定义，optgroup是不可选择的。例如，如果我有一个名为“水果”的组，其下的选项为“苹果”和“橙色”，则选择“水果”组项目将自动选择其下的项目。这部分我已经成功地完成了

然而，我想做的是突出显示下拉菜单中的父选项，即当所有子项都被选中时，它应该具有灰色的选定背景。下面是一个屏幕截图，显示了现在的工作方式。我单击了“水果”选项以使控件进入此状态：

请注意，在下拉菜单中，Apple和Orange均已选中。正如我所料，这些项目也会出现在上面的框中。我想让水果选项在下拉列表中有一个灰色背景，使其看起来像是被选中的，而不会出现在上面的框中。类似这样的模型：

请注意，此屏幕截图中的差异是父项的突出显示背景。我知道aria selected属性是驱动背景色样式的因素，但我似乎无法在特定的列表条目上切换它。我尝试过通过处理select2:open事件以及templateResult函数来实现这一点，但两者都不起作用

有没有一种方法可以让我在下拉列表中伪造父项的选中状态，而不让父项显示在上面的框中

我目前的代码如下：

JavaScript

HTML

---

因此，如果突出显示橙色，您希望突出显示水果？示例屏幕截图中已选择苹果和橙色。我希望父项也被选中。理想情况下，只有在选择了所有子项的情况下才会选择它，但我根本不知道如何选择父项，并且不让它出现在下拉列表上方的项目列表中。你是说，如果单击“水果”，它将列出水果、苹果、橙色？如果单击“水果”，上面的框中将只列出苹果和橙色。但是，如果可能的话，我希望在下拉列表中突出显示这三个项目。你让我感到困惑，这与有没有一种方法可以在列表中不显示父项目的情况下，伪造父项目的选定状态不同？

$(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");
      }
    }
  });
});

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