Change event with option identifier

[samitray]

Hi,
I am trying to get event listener 'change' to listen to options being changed.
However currently as i understand the change event doe not carry information
about which of the option was selected or deselected.
So i tried saving the state of all the option in a shadow array and then compare
each element on each change event. Is this the only way or am i missing something

[PhilippeMarcMeyer]

Good point : I'll get back to you soon

[PhilippeMarcMeyer]

Well, I could send you some data with VSB privateSendChange() which tells the original select something has changed but I can't do that for the same reason I gave up setting an hidden input field holding the comma separated list of all chosen options : the amount of data... One user told me he was using VSB with thousand of options slowing down dramaticaly performance.

Sending you the value change of one option in a select unique would not be a problem but what about a select multiple when you select/unselect all ?

I wonder : that could be a preference for a small amount of options ? What do you think ?

You can still set an event listener on the original select set an array of chosen values
and compare it to the previous (its probably what you already do)

    function getValues(id) {
        let result = [];
        let collection = document.querySelectorAll("#" + id + " option");
        collection.forEach(function (x) {
            if (x.selected) {
                result.push(x.value);
            }
        });
        return result;
    }

I I add a preference "getDetailedEvent" I would send an objet :

{
"added" : [...],
"removed" : [...],
"selected" : [...]
}

But you would not use it for large selects !

I don't consider it as very relevant for a general use
bu I undersand it can be important for you
If it helps you I can do it

Let me know

Cheers

Philippe

[samitray]

Hi Phillipe,
Thanks for the quick response...

I think that the performance use case where thousands of options are stored in a combo
is probably top end of the spectrum and very few users would be in the use case
I think the number of users who would want to know of single option change would probably
be quite larger than the performance user with thousand of options.

I am interested in getting an event when a user manually select or deselects a single option
Few Ideas that come to my mind to balance this requirement with respect to performance

1. we could setup a configuration attribute to disable option select / deselect event generation, so performance user can turn it off
2. for special case event i.e select all / deselect all we could send a single event with special flag/value showing that select/deselect all was performed

As you guessed rightly now i am comparing against a shadow array on each change event, my array is not very big so i am ok for now.

But a direct event is the most optimum, I come from embedded background where every byte saved is a bonus...hence my rant here..

Regards

[samitray]

I am in process of trying to attach events to option themselves, that could probably solve this issue....

[PhilippeMarcMeyer]

if you send me details by email i will see if there is not another option to do the job. without more informations I surprised (not doubtful) that you need to receive immediate info on each and every change. I'm interested to know sincerely

…

On Wed, 2 Jun 2021 10:17 samitray, ***@***.***> wrote: I am in process of trying to attach events to option themselves, that could probably solve this issue.... — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#42 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAQTZ62I3HTOVXODZV6MJC3TQXSLDANCNFSM454FIWQA> .

[samitray]

Thanks,
I was able to get the change event to work for my use case.
I am using VSB multiselect to control visibility of table columns
so when a user deselect an option the column is immediately
hidden and on select the column is shown....
I was able to do this without a shadow array because I can query
table for column visibility
I have not yet tried the event listener on option directly, but i
think it should also work.
Thanks for your help, Philippe , I have a new discussion on font size
and drop down size in a seperate Q&A
How can i mark this Q&A as answered?