Select2 trigger change не работает

Issue: remote data and select2.val().trigger(«change») #4510

Comments

joomlaA1 commented Aug 1, 2016 •

for example i have a form with a select2 that uses the remote data

so i know that select2 by remote data is empty on page load, meaning it has no data yet
it will only fetch the data once i click it

that part works (the filling up the the form’s select2 part)

when i load data to the form (which also involves loading a data to the remote select)
like this: 
$(«.js-example-data-ajax»).val(«3910945»).trigger(«change»);

that value does not get selected. because the select does not have any options..

what could we do with this? select2 is very very important in forms.

the not yet selected even once options cannot be .val() like:
$(«.js-example-data-ajax»).val(«3910945»).trigger(«change»); — not works, wish this works —-
on the f12 console
and then select some options and only those can then be .val() like:
$(«.js-example-data-ajax»).val(«3910945»).trigger(«change»); — works. —
because the once selected options stick with the select and become .val()-able (but i wish even the not yet selected ones also)

maybe the issue is the data don’t stick with the select2 as option (if you inspect element f12 the select2, even when the options are displayed on the select2, they don’t appear in the html no option tags there)

could we fix this. thanks.

The text was updated successfully, but these errors were encountered:

Источник

Refresh Select2 without triggering change event #3620

Comments

omggga commented Jul 29, 2015

In Select2 v4 documentation recommended to reset select by setting value to empty value and triggering event.

But how to reset dropdown select to placeholder without triggering change event and replacing tons of dom elements? Something like

The text was updated successfully, but these errors were encountered:

c-lee8 commented Oct 1, 2015

I second this issue, I tried upgrading from 3.5.1, but run into the issue where because change events trigger is required to refresh select2, (and select2(«val», null); function automatically trigger the change too), it trigger a flood of unwanted cascading actions which originally were meant to detect user made changes. This feature was previously available.

«triggerChange (optional) boolean Whether or not a change event should be triggered. false by default.»

If someone could look into this it would be great.

c-lee8 commented Oct 2, 2015

This appear to be an undocumented feature. I found the answer on stackoverflow, use ‘change.select2’

kevin-brown commented Feb 8, 2016

I might just document the change.select2 event as the recommended way to handle this.

smajl commented Feb 23, 2016

Oh my, this finally solved my implementation problems with select2 4.0.x into angular! Wow, should have known about this sooner. change.select2 FTW!

BallisticPain commented Jan 8, 2017

@smajl Are you making a library or just directly integrating?

smajl commented Jan 17, 2017

@BallisticPain It was a direct integration into very custom angular component. It used select2 adapter system nicely and added a lot of new functionality atop of select2 lib. But I’m not on that project anymore and not owner of that code, sorry. 🙂

Источник

Events

Select2 will trigger a few different events when different actions are taken using the component, allowing you to add custom hooks and perform actions. You may also manually trigger these events on a Select2 control using .trigger .

Event	Description
change	Triggered whenever an option is selected or removed.
change.select2	Scoped version of change . See below for more details.
select2:closing	Triggered before the dropdown is closed. This event can be prevented.
select2:close	Triggered whenever the dropdown is closed. select2:closing is fired before this and can be prevented.
select2:opening	Triggered before the dropdown is opened. This event can be prevented.
select2:open	Triggered whenever the dropdown is opened. select2:opening is fired before this and can be prevented.
select2:selecting	Triggered before a result is selected. This event can be prevented.
select2:select	Triggered whenever a result is selected. select2:selecting is fired before this and can be prevented.
select2:unselecting	Triggered before a selection is removed. This event can be prevented.
select2:unselect	Triggered whenever a selection is removed. select2:unselecting is fired before this and can be prevented.
select2:clearing	Triggered before all selections are cleared. This event can be prevented.
select2:clear	Triggered whenever all selections are cleared. select2:clearing is fired before this and can be prevented.

Listening for events

All public events are relayed using the jQuery event system, and they are triggered on the

Preventing events

Internal Select2 events

Select2 has an internal event system that works independently of the DOM event system, allowing adapters to communicate with each other. This internal event system is only accessible from plugins and adapters that are connected to Select2 — not through the jQuery event system.

You can find more information on the public events triggered by individual adapters in the advanced chapter.

Источник

Select event is not trigger if clicked on selected item #5229

Comments

0FilipK commented Feb 20, 2018

I searched whole Internet and I didn’t find any solution so I decided to make a new issue.

I’m using select2:select event and its triggers everytime when you select new value (that’s obv) but it doesn’t if selecting value is the same. In this example click on option with red border, close alert and then try to select this «red option» again. Event won’t start. How can I trigger it again? I tried use select2:close event but there is a problem. If we click outside select2 event triggers too and it’s not ok for me. I tried attach new event directly on select2 dropdown but it doesn’t work because you blocked it (I used $(document).on(‘click’, ‘.select2-results__option’, function()<>); )

The text was updated successfully, but these errors were encountered:

0FilipK commented Feb 27, 2018

scarabdesign commented Mar 1, 2018

Well, it seems that the value of the select element itself is not important to you, right? In other words, you are taking the value you select and using it elsewhere (i mean, why else would you want to choose the same item twice). If that’s true, add this:

In the link to your example, I was able to use the select2:close to set the value to null and was able to select the item with the red border multiple times. Even if you open the dropdown and click outside, the select2:close event does trigger, but all it’s doing is resetting the selector.

0FilipK commented Mar 1, 2018

@scarabdesign Thanks for answer. Value is important because it’s size ID of product. Let me explain what I want to do. Select is used to select size of product and options have data-available set to false or true depends on stock. If data-available is set to false I have a little envelope (added by css) on right side of this option and if user clicks on that I’m displaying a Foundation dropdown with form to let user know when product will be available again. Problem is if i’m using select2:select and user already have already picked size for example by URL param or just by selecting before, so it won’t work if he select again selected value. If I change event to select2:close and have selected option, clicking outside select2 causes displaying dropdown for a half of seconds. I want to prevent this «flickering». select2:select would be perfect but in source code of select2 is selecting event and it returns false if already selected. I’m using npm and I don’t want to download sources and change it manualy.

scarabdesign commented Mar 1, 2018

Ok, may I present a more hacky solution:

0FilipK commented Mar 5, 2018

@scarabdesign It’s working perfectly. Thank you so much 🙂

0FilipK commented Mar 5, 2018

@scarabdesign I noticed this solution has one defect. If we reset value so after open we don’t have highlighted last selected item. I tried to foreach every select2-results__option and compare value to prevselection but it doesn’t work. Code:

0FilipK commented Mar 5, 2018

The interesting thing is if I run in console code

it’s working. Probably select2 build html later or something. I tried to use setTimeout for 3 sec but same result.

scarabdesign commented Mar 6, 2018

Hmm, for some reason, your original example link (codepen.io) is not loading. I’ll may have to set up another example somewhere to run some tests.

0FilipK commented Mar 7, 2018

I checked and my codepen link’s working fine.

scarabdesign commented Mar 7, 2018

So it is! Must have been temporarily out of order.
OK, so in the formatting function, I changed it slightly to add an identifying class to each item, then on open, change the highlight. Yes, wow, this is hacky, and there is a tiny flicker as the class switches, but I’m not sure now else to do it. Notice that the highlighting is happening after a zero second pause:

phpbg commented Oct 12, 2018 •

Hi, I experience the same issue.
I would expect at least a change event to be fired
I can see a change Event, but on internal input :

Is this a bug or is it native select behavior?

DaTRiX25 commented Dec 5, 2018

@phpbg I think this event is triggered when the search field is cleared after closing the dropdown. Maybe I’m wrong.

ghost commented Dec 18, 2018

This is a bug. Cause in docs says that select2:select ‘Triggered whenever a result is selected.’. But when we select previously selected value, this event not triggered.

GillesVermeulen commented Jan 11, 2019 •

I’d like to see this changed too. Because the «selecting», «select», «unselecting» or «unselect» events are not triggered when clicking an item that is already selected in a non-multiselect Select2 element, it seems impossible to have clickable links/buttons inside Select2 options.

The methods described that allow clickable elements inside Select2 options rely on the fact that the «selecting» or «unselecting» events are triggered and the original event is passed to their handlers. That way you can check if the original event was a click event on one of your clickable elements and handle them accordingly.

An easy fix would be to change this:

This way the «select»/»selecting» get triggered, even when you click the already selected item in a single-select Select2 element.

Источник

Reset select2 value and show placeholder

How do I set the placeholder on value reset by select2. In my example If locations or grade select boxes are clicked and my select2 has a value than the value of select2 should reset and show the default placeholder. This script is resetting the value but won’t show the placeholder

39 Answers 39

You must define the select2 as

To reset the select2

I was also having this problem and it stems from val(null).trigger(«change»); throwing a No select2/compat/inputData error before the placeholder gets reset. I solved it by catching the error and setting the placeholder directly (along with a width). Note: If you have more than one you will need to catch each one.

I’m running Select2 4.0.3

to clear the values, but also restore the placeholder use.

if it’s empty, it will select the first option item instead which may not be what you want

frankly. Select2 is such a pain in the butt, it amazes me it hasn’t been replaced.

After trying the first 10 solutions here and failing, I found this solution to work (see «nilov commented on Apr 7 • edited» comment down the page):

The change is then made:

(The author originally showed var $select = $(this[1]); , which a commenter corrected to var $select = $(this[0]); , which I show above.)

From select2 website,

this will remove values AND most important for me — it also remove an empty x button

I have tried above solutions but none worked with version 4x.

What i want to achieve is: clear all options but don’t touch the placeholder. This code works for me.

Using select2 version 3.2 this worked for me:

Didn’t need to implement initSelection

where 0 is your first value of the dropdown

Use this code into your js file

Before you clear the value using this $(«#customers_select»).select2(«val», «»); Try setting focus to any other control on reset click.

This will show the placeholder again.

The DOM interface, already keeps track of the initial state.

So doing the following is enough:

Well whenever I did

I started getting some kind of lag after some three to four triggers. I suppose there’s a memory leak. Its not within my code because if I do remove the this line, my app is lag free.

Since I have allowClear options set to true, I went with

This can be followed by a $(‘myselectdropdown’).select2(‘close’); event trigger on the select2 dom element in case you wanna close the open suggestion drop down.

Not the answer you’re looking for? Browse other questions tagged jquery twitter-bootstrap jquery-select2 or ask your own question.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

site design / logo © 2021 Stack Exchange Inc; user contributions licensed under cc by-sa. rev 2021.10.15.40479

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник