Unselect and Select multi-select choice field values dynamically

Forms
1

I'm trying to make a multi-select choice field values selected dynamically. I have tried many different way but nothing seems to work, is that possible to do? Description is below:

I have 2 multi-select fields Divisions and Departments. Departments is filtered based on the selected Divisions, which works. However, I need to re-select the previously selected Departments if they are in the selected Division, otherwise unselect.

Below is one of the many variations of the code that I have tried:

var departmentIdsToSelect = [];
field.widget.bind("dataBound", function() {
 var availableDepartments = field.widget.dataSource.data();
 for(y = 0; y < selectedDepartmentIds.length; y++){
	 for (i = 0; i < availableDepartments.length; i++) {
		 if (availableDepartments[i].LookupId == selectedDepartmentIds[y]) { //selectedDepartmentIds holds the ids of the selected departments before the filter is applied.
			 departmentIdsToSelect.push(selectedDepartmentIds[y]);
			 break;
		}
	}
}
fd.field('Departments').value = null; 
fd.field('Departments').value = departmentIdsToSelect;

})

This does not work in that it will not remove the department when it is not even part of the available list. For example "Family and Community Services" should not be selected because it is not part of the available departments the drop down.

image

2

Hello @Zusbry,

So there are might be the same Department for different Divisions, is that correct?

Could you please share the screenshot of the source lists so I could have a full picture.

Thank you!

3

Hi @mnikitina, Departments are unique to their Division.

Below is the list of all Divisions followed by their departments, I hope that's what you meant.

image
image351×600 9.53 KB

Thank you.

4

Hello @Zusbry,

Thank you! So you need to keep selected Departments when adding/removing the division, is that correct?

You can use the code below to check if the values from the second lookup are related to the values from the first lookup:

fd.field('Divisions').$on('change', function(value){
    var departments = fd.field('Departments').value;
    var values = [];
    for(i=0; i < value.length; i++) {
        for(j=0; j < departments.length; j++) {
            if(departments[j].Division.Id == value[i].ID){
                values.push(departments[j]);
            }
        }
    }
    fd.field('Departments').value = values;
});
1 Like
5

Hi @mnikitina,

Thanks for the solution, it mostly worked but with a glitch, as shown in the screenshot the values are being duplicated randomly, not all the time. In that situation I had previously selected the Division "Senior Administration", but removed it and then selected it after all.

image
image819×180 6.09 KB

I added code to make departments null.
fd.field('Departments').value = null;

Before re-adding the values
fd.field('Departments').value = values;

That seems to work, I have not been able to reproduce the duplication; is that something you would recommend.

Thanks

6

Hello @Zusbry,

Yes, that is the best solution. Great job!