带有jquery的多选下拉列表

Question

目前我正在自定义Multiple Selection Plugin 的多项选择下拉列表，这些是我将应用于我的自定义选择的行为：

1. 选择父项时，将选择所有子项。
2. 当所有子项都被选中时，父项也会被选中， 否则，如果其中一个孩子被取消选择，那么父母也将被取消选择。
3. 当所有的孩子都被选中时，在选中的字段中应该只有父母的名字。
4. 子级别也应作为第一级别。

(1)、(2)、(4) 我已经完成了。但是对于（3），我还没有想出任何解决方案。

这是多选的示例json字符串：

var _str = '{"10":{"0":"0","1":"DISPONIBILITES","2":"t","style":"font-weight: bold;"},"16":{"0":"0","1":"TRESORERIE NETTE","2":"t","style":"font-weight: bold;"},...."}}}';

这是我创建的https://jsfiddle.net/skL589uu/7/。

如果这里有人能给我一些想法，那就太好了。

Answer 1

您不必为此编写任何自定义逻辑，multi-select.js 提供了一个名为 optGroups 的功能。

只需在 HTML 中将子项分组到父组下，其余的就处理好了。

这里是官方文档的链接，Multi-select OptGroups

HTML 代码：

  <select multiple="multiple">
    <optgroup label="Group 1">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </optgroup>
    <optgroup label="Group 3">
      <option value="15">15</option>
    </optgroup>
  </select>

JQUERY 代码：

$(function() {
   $("select").multipleSelect({
     multiple: true,
     multipleWidth: 55,
     width: '100%'
   });
});

Live Demo @ JSFiddle