4

When using Select2 (https://select2.github.io/examples.html) for multi-value select boxes you can toggle a selected value from the dropdown. Is there any way to prevent this behaviour? So that you could only remove selected items by clicking on the X next to them.

All help greatly appreciated.

3
  • looking for this jsfiddle.net/ishanbakshi/fyhsz9ra Nov 17, 2016 at 11:39
  • I would say just remove the selected option from the list of options after it has been selected...
    – gkb
    Nov 17, 2016 at 11:40
  • Thanks guys, but in this case we need the item to stay in the dropdown but not have the toggle function.
    – nikoka
    Nov 17, 2016 at 11:47

1 Answer 1

9

you can use unselecting event:

$(".js-source-states").select2()
  .on("select2:unselecting", function (e) { 
    // make sure we are on the list and not within input box
    if (e.params.args.originalEvent.currentTarget.nodeName === 'LI') {
      e.preventDefault();
    }
  }
);

plunker: http://plnkr.co/edit/f8w97dSykPmbCZkN65JA?p=preview

see https://select2.github.io/examples.html#programmatic-control for more details,

if you want to close select, use $example.select2("close"); (https://select2.github.io/examples.html#programmatic)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.