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

JQUERY代码：

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

现场演示@ JSFiddle