Multiple selection dropdown list with 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 :

When parent is selected, all children will be selected.
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.
When all the children are selected, there should be only parent's name that showed in the selected filed.
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.

dreamweiver · Accepted Answer · 2017-07-13 05:49:59Z

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

edited Jul 13, 2017 at 5:49

answered Jul 13, 2017 at 5:43

dreamweiver

5,9922 gold badges27 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Nothing Over a year ago

The selection html structure is returned from database so I don't want to modify it. I forgot to mentioned about this in my question.

dreamweiver Over a year ago

you will be modifying it only for the purpose of rendering , so it wouldn't affect your data structure on DB. So while parsing the DOM structure and mapping it to the Select tag, you can just create a OptGroup tag and then add the child elements within it.

Nothing Over a year ago

OptGroup doesn't work on selection that has multi level.

dreamweiver Over a year ago

your right multi-select library is not supporting multi level list with OptGroup. so there is not straight forward solution for this, you need to have some custom logic for handling multi-select using the helper methods provided by the library. eg. you can set the parent id to select box when all its childs are selected,$('select').multipleSelect('setSelects', [parentId]);, jsfiddle.net/dreamweiver/skL589uu/18 . similarly you need to figure out how to handle the other scenarios. ref: wenzhixin.net.cn/p/multiple-select/docs/#methods

Muhammad Ali Over a year ago

You have a script error and should look into this. @dreamweiver

Collectives™ on Stack Overflow

Multiple selection dropdown list with jquery

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related