Drop-down list of multiple options with jquery

Question

I am currently setting up the Multiple Selection Plugin drop-down list , and this is the behavior that I am going to apply to my individual selection:

• When choosing a parent, all children will be selected.
• When all children are selected, the parent will also be selected, otherwise, if one of the children is canceled, then the parent will also be canceled.
• When all children are selected, there should be only the name of the parent that appears in the selected folder.
• The sub-level should work as the 1st level.

(1), (2) and (4) I have already done this. But for (3) I have not yet come up with any solution.

This is an example json string for multiple selection:

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;"},...."}}}';

Here is the https://jsfiddle.net/skL589uu/7/ that I created.

It would be great if anyone here could give me some idea about this.

Answer 1

You do not need to write any custom logic for this; it multi-select.jsprovides a function with a name optGroups.

just group the children in the parent group in HTML and the rest will take care.

Here is a link to white papers, Multi-select OptGroups

HTML code:

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

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

Live Demo @JSFiddle