Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Destroy or Re-initialized Multiselect #179

Open
afzafri opened this issue Jul 31, 2019 · 1 comment
Open

Destroy or Re-initialized Multiselect #179

afzafri opened this issue Jul 31, 2019 · 1 comment

Comments

@afzafri
Copy link

afzafri commented Jul 31, 2019

Is there any functionality for destroying, or refreshing the current multiselect?
What I means is that for dynamic multiselect values from AJAX, when the list in the right box is updated dynamically, how to update the left box, like removing the values that are already selected in the left box. I'm sorry if my word is confusing.

What I did right now is, I reused your codes in the initialized function. When I the left box value is updated, I call this function:

function refreshMultiselect() {
          var right = $('#optgroup_to');
          var left = $('#optgroup');
          right.find('option').each(function(index, rightOption) {
              if ($(rightOption).parent().prop('tagName') == 'OPTGROUP') {
                  var optgroupSelector = 'optgroup[label="' + $(rightOption).parent().attr('label') + '"]';
                  left.find(optgroupSelector + ' option[value="' + rightOption.value + '"]').each(function(index, leftOption) {
                      leftOption.remove();
                  });
                  left.find(optgroupSelector).removeIfEmpty();
              } else {
                  var $option = left.find('option[value="' + rightOption.value + '"]');
                  $option.remove();
              }
          });
        }
@Bodata
Copy link

Bodata commented Nov 12, 2020

Hi,

I had a multiselect and wanted to change the content when i selected an other group in a select.
At first the multiselect kept old data.
I seem have solved the problem by turning off all the elements i used, and after that reinitilize the multiselect ( in js.haml)

$('#multiselect').off();
$('#multiselect_to').off();
$('#multiselect_leftSelected').off();
$('#multiselect_rightSelected').off();
$('#multiselect_leftAll').off();
$('#multiselect_rightAll').off();
$('#multiselect').remove();
$('#left_picklist').html("");
$('#left_picklist').append("#{escape_javascript(render partial: 'left_picklist' , locals: {items: @items_not_selected}) }");
$('#multiselect').multiselect();

I have not tested this heavily but it seems to work.
Code is called by onChange select.
Code used in Ruby on rails project.

Partial used (html.haml) looks something like this. (unable to get the indents right !)

%select{:name => "from[]", :id => "multiselect", :class => "form-control", :size => "35", :multiple => "multiple"}
- for item in @items_not_selected
%option{:value => item.id }
= item.text

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants