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

How to get the last selected item #34

Open
harmancode opened this issue Jun 26, 2021 · 2 comments
Open

How to get the last selected item #34

harmancode opened this issue Jun 26, 2021 · 2 comments

Comments

@harmancode
Copy link

harmancode commented Jun 26, 2021

I am trying to get the last selected item by listening to the select2:select event as suggested here, but I could not make it work.

Is this kind of event listening not supported?

$('#mySelect2').on('select2:select', function (e) {
  // Do something
});

This does not work either:

$(document).on('select2:select', '#mySelect2', function (e) {
  // Do something
});

But this works:

$('#mySelect2').change(function (e) {
  // Do something
});

(select2 version 4.x)

@wasikuss
Copy link
Owner

wasikuss commented Jun 28, 2021

I've checked amd version and it works. Maybe there is some issue with non-amd version.
https://jsfiddle.net/wasikuss/eb2qxus6/ - open console and try de/select some options ( from browser of jsfiddle )

@harmancode
Copy link
Author

harmancode commented Jun 30, 2021

It worked when I used your last submit and placed .on event like in the example you provided. I can now see the selected option in the console. Thank you!

However, I have another issue when I try to use the selected option. I am trying to change the selected select2 options programmatically based on the selection when a selection is made, but I can't refresh the drop-down because triggering change events apparently does not fire in the 'on' block. The drop-down only refreshes itself when I make another selection or close/reopen the drop-down. I am using 'change.select2' as suggested here too, but it doesn't work.

Should I use a different namespace/tag here other than 'change.select2' or 'change'? Or should I use another approach to solve this problem? (The main goal is adding an 'All options' option, which will clear all other selections if it is selected).

$('.select2-multiple').select2({
                placeholder: 'Select items',
                closeOnSelect: false,
                templateSelection: function(data) {
                    return 'Selected ' + data.selected.length + ' out of ' + data.all.length;
                },
                dropdownAdapter: DropdownAdapter,
                selectionAdapter: SelectionAdapter,
                resultsAdapter: ResultsAdapter
            }).on('select2:select', function (e) {
                console.log("select2:select", e.params.data.id);
                let optionID = e.params.data.id;
                if (optionID === 'all') {
                    $this = $(e.target);
                    $this.val(null).trigger('change.select2'); // Clear <--- Trigger event does not work here.
                    $this.val('all').trigger('change.select2'); // Select 'All' <--- Trigger event does not work here.
                }
            })

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