Multiselect menu - Select All

[stoyleg]

I’m trying to add a simple ‘Select All’ function to some multi select menus. I’ve tried numerous javascript/jquery scripts but none of them have any effect.

I’m wondering if the way the menu is implemented in Wappler is different somehow - maybe the dmx-bind:options are preventing the script from working?

Has anyone done this before in Wappler?

Thanks.

[Mr.Rubi]

Hi George

For the "select all" task, there is usually enough Wappler funds. Look at my proposed solution in another topic. Perhaps it can help you in your task.

How to filter a database query?

Well, combining two functions in one select (a separate selection and the selection of all values at once) requires a different, more complex approach. The most rational solution that comes to mind is as follows: To get all the values in the input without overloading the client part with unnecessary actions, you will need to slightly supplement the server action, which is responsible for supplying values for the select. You will need to add another Set Value step with all the values that you…

[stoyleg]

Thanks @Mr.Rubi - sorry for the delayed reply.

I’m not sure if this really solves the problem. I’m just looking to implement a simple script like this…

http://jsfiddle.net/n2JWM/

There are many similar scripts but none of them seem to work.

[Mr.Rubi]

The script works correctly. Please check if you did everything correctly:

1. Install the select component on the page (the multiple selection function must be enabled):
   

   

2. Copy the specified script (preferably somewhere at the bottom of the page) in the script tag. Be sure to replace the ID of the select component that you are using with your own inside the script:
   

   

3. It does not matter what you will use to control the selection of a button or link, it is important that they use a static event rather than a dynamic one. In a static event, specify the function that you refer to when you click:
   

   

If everything is done correctly, the following result will be displayed:

[stoyleg]

Thanks again for the reply.

That’s exactly how I have it configured but it doesn’t work for me.

I guess there must be another script preventing it from working - I’ll continue investigating.

Thanks again.

[stoyleg]

@Mr.Rubi - it seems when you make the select component dynamic something prevents the script from working - it works with static options but not using a data source.

I’ve created an example here - both select components are using the same script. The static version works but the dynamic one doesn’t.

Maybe it’s something to do with the dmx-bind:options, i.e. the way the select component is being populated - I have no clue.

[Mr.Rubi]

The problem is actually very simple. But I myself used to come across it very often and could not understand what was the matter. The fact is that if you look at the logic of the script, you can see that it creates an array of select_ids. After that, the $(document).ready event is listened to. As soon as the document is ready, a function is run that iterates through all the option indexes that are included in the select component and adds them to the select_ids array. However, since you use dynamic data for the selection options, they arrive later than the $(document).ready event. In this connection, dynamic variants do not have time to get into the DOM when the array filling function is started.

The easiest way that came to my mind for this situation is to redo the script a little. I moved the creation of the array, its filling, and the selection of the select options into one function:

In this case the script will work if the select component uses dynamic data:

[stoyleg]

@Mr.Rubi - thanks so much for this, it works now - I would never have worked that out.

I really appreciate your help!