带有jQuery的多选下拉列表

Question

Currently I am customizing multiple selection drop-down list of Multiple Selection Plugin and these are the behaviors that I am going to apply on my customized selection :

1. When parent is selected, all children will be selected.
2. When all the children are selected, the parent would be selected too, otherwise if one of children is deselected, then the parent would be deselected too.
3. When all the children are selected, there should be only parent's name that showed in the selected filed.
4. The sub level should work as the 1st level as well.

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

This is the sample json string of the multi 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 that.

Answer 1

You don't have to write any custom logic for that, multi-select.js provides a feature called optGroups .

just group the child items under the parent group in the HTML and the rest is taken care.

Here is link to official docs, 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