Original Select Change Behavior

[devdazed]

I think it would be a great feature to modify the list if I change the value of the original select.

[vicb]

yes, it is a great feature. check exemple #2.

[devdazed]

that's great for adding a new item to the list. but I was thinking more along the lines of changing the selected options in the list. for example, if I do:

$("#cities2").val(['Boston', 'BuenosAires', 'Calgary']);

the ol should remove the items and add in these. and also properly disable these in the list and enable the others.

[vicb]

you should also scroll down to ex #4. Anyway I think .change() is the method your are looking for. Do I miss something ?

[devdazed]

yeah, i do something similar as a workaround but when you add in deselecting items and selecting new ones, then it starts to get a bit hairy, especially if you do it in multiple places. I figured attaching an onchange event to the original multi-select to modify the list would be easy and straightforward for the developers using the tool.

[vicb]

You can use .change() because the change event is bound. However it is not triggered when the DOM is modified programmatically.

[devdazed]

i see now, that's actually perfect. thanks!

[devdazed]

using this method seems to re-oder the generated dropdown select list to put the changed value to the bottom. My use case is this, there are 2 selects, one single select and one multiple. both have the same values. if the user selects something from the single dropdown then they can not select it from the multiple select. if they select an option already selected in the multiple select then that value should be removed. here is the exact code:

$("#report_primary_group").change(function(){
  var select = $(this);
  var secondary_select = $("#report_secondary_groups");
  var secondary_groups = secondary_select.val() || [];

  var idx = secondary_groups.indexOf(select.val());
  if(idx!=-1) {
    secondary_groups.splice(idx, 1);
  }
  secondary_select.val(secondary_groups).change();

  secondary_select.siblings(".bsmSelect").find("option[value='" + select.val() +"']").attr("disabled", true).addClass("bsmOptionDisabled");
});

[devdazed]

to get it to happen, i select something from the secondary list, then select that same one from the primary. when i go back to the secondary list, the value is now at the bottom

[vicb]

This is a very specific use case, you should modify the code or write your own plugin