.find and Preselect option on Multiselect

How Do I...
#1

Hi team
I am facing an issue in select2js Multiselect dropdown preselect.

I am trying to find the items using .find() option provided by select2, somehow it’s not removing and preselecting the items

Code Sample:

// getting the already selected values
var selectedvalue = $(ChildControl).val();

// then refreshing the control with new values
$(ChildControl).select2(
{
ajax: {
url: baseUrl,
dataType: ‘json’,
async: true,
data: { search: SearchParam },
processResults: function (data, params) {
var resData = [];
data.forEach(function (value) {
if (value.Value.toLowerCase().indexOf(params.term.toLowerCase()) != -1)
resData.push(value);
});
return {
results: $.map(resData, function (item) {
return {
text: item.Value,
id: item.Value
}
})
};
},
cache: true
},
minimumInputLength: 1
});

// then trying to preselect the values from the saved list to the newly added items
var selectedArray = [];
selectedvalue.forEach(function (value) {
selectedArray.push(value);
});

if ($(ChildControl).find(“option[value=’” + selectedArray + “’]”).length) {
$(ChildControl).val(selectedArray).trigger(‘change’);
//$(ChildControl).select2(‘val’, selectedvalue);
}

Issue:
control is not removing the not found items and preselecting the found items.

Please help to find out what is wrong in my approach

Thank you

#2

Pre-selecting items in a Select2 that gets its data via AJAX is more complicated than the approach you’re using. The problem with your code is that the .find() method will not find the items you’re looking for because they are not yet in the Select2’s data. Select2s that are fed by AJAX do not actually get any data in them until the user starts typing, and the back-end data source returns data that matches the user’s input. Your code appears to expect the data has already been returned to the Select2, but it hasn’t.

There is documentation on how to deal with this issue here: https://select2.org/programmatic-control/add-select-clear-items#preselecting-options-in-an-remotely-sourced-ajax-select2.

#3

Hello John
Thank you for the response.

I understand that select2 will not load until the user starts typing.

, but my scenario here is different. what I am trying to achieve here are a Parent and child-related select2 dropdowns.

Based on parent select I am loading child dropdown which is working perfectly. now I have selected some items in the child based on the parent and when a parent is removed associated child should remove from the selection and other selected items should be remain selected as is. (already the child dropdown is loaded with data )

Sample is attached

image
image896×141 5.3 KB

Here Parent’s are Samsung and Apple and the child’s are Samsung Child 1, & 2 Apple Child 1

so if I remove Samsung, Samsung’s child should be removed and Apple child should remain there as is.

I have tried to achieve this using options like

.find(),

var option = new Option(data.full_name, data.id, true, true);
paent .append(option).trigger(‘change’);

but it’s not working

do you have any suggestions or any sample . ?

Thank you

#4

Hi, Jintomon–

Thanks for the additional details. In an AJAX-fed Select2, the only “actual” <option> elements are those that represent the user’s selections (or <option>s you’ve created to create pre-selected items). So, in your example, the Child <select> should actually contain <option> elements for each of the current selections. You should be able to .find() them. Their “value” attributes should be the “id” attributes of the selected items specified in the data source, and their innerText attribute should be their displayed text. However, without seeing your actual code, as well as the generated HTML <option> elements in the Child <select>, I can’t really tell you what’s wrong with your logic or how to proceed.

I can tell you that you’ll need to use the select2:unselect event* to know when an item in the Parent is deselected (and which item it is), so you can track down the related <option>s in the Child <select>. (*Note: you might also want to hook into the select2:clear event on the Parent to clear all the selections in the Child.)

If you can provide samples of your code (ideally on codepen.io or jsfiddle.net) I will be glad to give it a look and see if I can help you further.

#5

hi

Manage to figure this out after few different tries.

first list the option in select even if you are using ajax method or not.

if you are using ajax method than list all the selected values only.

   var artlist = '6701,6123';
    var exArtistlistArray = artlist.split(",");
    $('.show_artist_ids_select2').val(exArtistlistArray);
    $('.show_artist_ids_select2').trigger('change');