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