1

I have created a multi selection select control using Bootstrap select.

By default I need to show dynamically selected items. When I make selected in option ALL selection (<option value="All" selected >All</option>) by default it shows selected in UI. But when do for one option selected its not shows the tick.

Demo is here: https://jsfiddle.net/sharmilashree/L7wzv5k0/10/

(i.e)

<option value="All" selected >All</option>
<option value="EC" selected>EC (Early Childhood)</option>
Ammu
  • 27
  • 6
  • There is no `selectpicker` in jQuery UI. Do you mean Selectmenu? – Twisty Jan 23 '17 at 22:43
  • Possible duplicate of http://stackoverflow.com/questions/40224287/how-to-set-selected-option-with-selectpicker-plugin-from-bootstrap – Twisty Jan 23 '17 at 23:01
  • Hi Twisty- Thanks for your response. I don't want to change my option value. I need to show tick mark when option is selected (i.e ). But in behind the code this shows the particular option selected. I found that in which point issue raise(When option All is selected code). if i remove below code it works fine. But i want select All option too. Please help on this. $('#myselect').selectpicker().change(function () { toggleSelectAll($(this)); }).trigger('change'); – Ammu Jan 24 '17 at 11:50

2 Answers2

1

I suspect the issue is as you commented, here:

$('#myselect').selectpicker().change(function () { toggleSelectAll($(this)); }).trigger('change');

If you drop the trigger('change') it works as expected:

https://jsfiddle.net/Twisty/3pfq5u41/

I guess my question is why trigger a change event? Really, I would think that you only want to execute toggleSelectAll() when the "All" value is selected.

Perhaps something like: https://jsfiddle.net/Twisty/3pfq5u41/2/

Hope that helps.

Twisty
  • 30,304
  • 2
  • 26
  • 45
  • Thanks for your response. the demo mentioned here:https://jsfiddle.net/Twisty/3pfq5u41/ Working fine but in one case its not giving solution (i.e) If you try to select another option previous selection tick mark lost also new selected option not tick not shows. My required: select all/de select all in Option All by default so tick mark for already selected Items. Allow user to edit their selected options. Thanks in advance. – Ammu Jan 25 '17 at 12:59
  • @Ammu are you still working on this? I could not figure out what you meant in your comment. – Twisty Mar 13 '17 at 15:34
0
  1. Wrong event selection:

Replace 

$('#myselect').selectpicker().change(function () { toggleSelectAll($(this)); }).trigger('change');

to

$('#myselect').selectpicker().change(function () { toggleSelectAll($(this)); }).trigger('select');

  1. Check for "undefined" as well.

    if (control.data('allOptionIsSelected') != allOptionIsSelected && typeof(control.data('allOptionIsSelected')) != "undefined") {

And you are done! Happy Coding.

Sumit Sharma
  • 24
  • 2