带有 jquery 的多选下拉列表

Question

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

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 中的子项分组到父组下，其余的就可以了。

这是官方文档的链接，多选 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>

J查询代码：

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

现场演示 @ JSFiddle