Select2 Mult Select Usage guidance

[psweb]

I have a multi select dropdown on my dashboard, which i use in multiple places for Add/Edit/Update forms, all is working pretty well using the Select2 library from https://select2.org/getting-started/basic-usage however the only thing I can not seem to get working is the “Selected Value” part of this.

So with an update form, i would like the multi select to already have filled in what has already been selected previously so the user can add or remove items from their previous selection.

As an example lets say I have a list of all countries in the world, and i have asked the user to select all the places they have visited.
Down the road the user now visits a few more countries and wants to update their selections, they click edit, and it should pull from the database all their previously chosen countries so they can add some more as they see fit.

Currently here is what i have
For Display i have a table showing all the countries they have visited like
South Africa,Bulgaria,Namibia

They click Edit on the record and it does this

<a class="small text-info" href="javascript:void(0);" dmx-on:click="view_single_experience.load({exp_id_view: ee_id})" onclick="$('.js-countries').select2();$('.js-countries').val([3,14]).trigger('change');"><i class="fas fa-pencil-alt fa-fw"></i> Edit</a>

Then server connect queries my database for the entire record based on ee_id and returns the country listing as a comma separated list, like 4,6,7,9 as what the user has previously chosen.
My select looks like this

<select id="inp_edit_ee_countries" class="form-control js-countries" name="edit_ee_countries[]" dmx-bind:options="form_propagator.data.query_country_viewer" optiontext="c_name"	optionvalue="c_id" multiple="true" required=""></select>

When this loads it auto completes with record 3,14 as per the onclick which initialises and then sets the selected IDs.
Now I want this same idea to work but instead of manually setting 3,14 as I have, I need the dynamic values, but I can not get that to work.

Here are some ways I have tried
$('.js-countries').val([3,14]).trigger('change'); Works

None of the below work.
$('.js-countries').val([{{countries}}]).trigger('change');
$('.js-countries').val([dmx-parse('countries')]).trigger('change');
$('.js-countries').val([dmx-parse('sc_edu_view_single.data.query_experience[0].countries')]).trigger('change');
$('.js-countries').val([dmx.app.data.sc_edu_view_single.data.query_experience[0].countries')]).trigger('change');
$('.js-countries').val([dmx.app.data.countries')]).trigger('change');

Any advice would be appreciated please, I can literally do this {{countries}} and it outputs 3,14 on my page, but getting that into the javascript needed for select2 is just not happening for some reason.

I even tried adding an ondone="my_custom_function()" onto the server connect file and

<script>
function my_custom_function() {
  $('.js-countries').val([3,14]).trigger('change');
}
</script>

Which works as expected, then try get the dynamic data by changing to

<script>
function my_custom_function() {
  $('.js-countries').val([dmx.parse('sc.data')]).trigger('change');
}
</script>

And It doesn’t work, so I assume I am doing something wrong.

[psweb]

Ok been fighting my way through this

The console logs the exact data i want, but when i try add the same code into the select2 then i get an error, can someone tell me what syntax adjustment i need please.

	<dmx-serverconnect id="sc_view_single_experience" url="dmxConnect/api/educator-management/view-single-experience.aspx" noload="noload" ondone="myfunc();"></dmx-serverconnect>

	<script>
		function myfunc() {
			console.log(dmx.parse('sc_view_single_experience.data.query_view_single_experience.ee_subjects'));
			$('.js-grades-multiple-edit-experiences').val([dmx.parse('sc_view_single_experience.data.query_view_single_experience.ee_subjects'))]).trigger('change');
		}
	</script>

@patrick I am hoping you will see me error pretty easily in this

[Teodor]

The solution here was to use the split formatter, as the select 2 plugin expects the data like that (an array):

dmx.parse('sc_view_single_experience.data.query_view_single_experience.ee_subjects').split(",")

[psweb]

Thank you for helping with this @Teodor

[Kavi_Joshi]

I am facing similar issue.
I have select2 dropdown with multiple enabled.
User selects multiple options in a previous action. These multiple options are saved in the database single field separated by comma.
Then in second action user should be able to see previous selected options.
I am using a button in the table to enable a modal form and set value of select2 dropdown options datasource and previously selected options using split function. But this doesnt show the previous selected options.

Below is my select dropdown code:
<select id="select3" class="form-control selectTwo" name="states1[]" data-msg-required="" multiple="true" style="width: 100%" dmx-bind:options="scStudyDescription.data.queryStudyDescription" optiontext="studyDescription" optionvalue="studyDescription" required=""> </select>

Below is my button in table with onclick dynamic event
<a href="#" class="btn" data-toggle="modal" data-target="#mdlActiveStudyHistoryUpdate" dmx-on:click="scStudyDescription.load({modality: modality},true);$('.selectTwo').select2().val([dmx.parse(studyDescription).split(',')]).trigger('change');"><i class="fa fa-pencil-square-o"></i></a>

Example value of selected value from studyDescription is “Chest PA,Chest LAT”. These 2 options were selected by user in previous option and saved in database single field as csv.

[webmaster]

Hey @psweb and @Teodor,

Thank you for posting your questions and answers here, I had a similar query but got it to work now, however the only issue I am facing is that the select2 multiselect is displaying the wrong values from my dynamic list.

For example, I have a CRUD table with an edit button, when I click on the edit button the first time, the select2 multiselect field doesn’t display anything though the values are passed correctly to the field, then the second time I click on the edit button, the multi select field displays the values of the first time, and so on.

I don’t know why this happens, I even tried to put a timeout so that the server connect has enough time to get the response, but it still didn’t work.

onclick="$('.select').select2();setTimeout(function() {$('.select').val([dmx.parse('sc_getSpec.data.apiSpecList.data[0].LocationId').split(',')]).trigger('change')}, 2000);

This is example when I click on edit button the first time:

This is example when I click on edit button the second time, for a different record:

As you can see the wrong values are being displayed in each time, do you have any idea on what the issue could be here?

[webmaster]

I have also tried using this function but no success still:

<script>
								function myfunc() {
									console.log(dmx.parse('sc_getSpec.data.apiSpecList.data[0].LocationId').split(","))
									$('.select').select2();
									$('.select').val([dmx.parse('sc_getSpec.data.apiSpecList.data[0].LocationId').split(',')]).trigger('change');
								}
							</script>

[sid]

So with Select2, its a bit tricky to get things working correctly since its a JS library that need to be initialized.
I have used it extensively, and its a really good control.

With Wappler, and multi-value specifically, the way you are storing data is completely fine. CSV.
When you fetch these values from the DB, you have to dmx-bind this value AS-IS.
This CSV value is native HTML way to process multi-selections.
Once that is done, just initialize the select control with select2 and you should show the selected values correctly.

As for the initialization/setting of value you are doing on dmx-on:click, that does not understand JS.
You will have to use onclick event (as I see you have tried in other post).

To test out the selection, just set the value of the select and then in the browser console, initialize the select with select2(). If you see that it works, then comes the timer.
Using the static event onsuccess event of the server action you are trying to init select2, put your setTimeout() method and put $('.select').select2(); inside this function.

Again, you should not have to pass any values to select2 separately.

[webmaster]

I didn’t quite understand your solution, I assume it refers to the question posted by Kavi.

@sid Do you happen to know what the problem in my case is?

[sid]

See if you understand the discussion here, and can utilize any of it : String split to array to Select Component

Please post your findings here and i’ll try to help then.

[webmaster]

Thank you, I followed those steps, and got it working perfectly now.

[Teodor]

Multi select is now available in Wappler, thanks to the Tagify component:
See:

Using the Tagify Component

Intro The Tagify component transforms an input field into a Tags component , in an easy, customizable way, with great performance and many customizable options. Tagify provides auto suggestions when entering text into the input - really useful dynamic list of products, countries, options etc., so you can offer your users quick search and selection without having to enter long text. In this tutorial we will show you the basics of the component. Add Tagify on the Page We added a form on the pa…