JS Display selected items in order in the drop-down widget

1.1 Problem

In some actual reports, drop-down check boxes are often used, but the default drop-down check box values are displayed according to the order of selection.

In some cases, the value of the selected items will need to be be sorted accordingly, as shown in the following figure. How to achieve this?

1.2 Solution

Use JavaScript to get all the items of the drop-down checkboxes, and after editing, sort the current checkbox values accordingly.

Note: This method does not support the mobile devices.

Add a drop-down checkbox widget to the parameter pane, and set the data dictionary.

Add the Edit End event to this widget. Enter the following JS:

var obj = contentPane.parameterEl.getWidgetByName('col').options.data.options.dataSource.data;
//Get all options under the drop-down checkbox. "col" is the widget name
var pArray = [];
$.each(obj, function(i, v) {
    pArray.push(v.value);
})
//Store the items in pArray
var v = this.getValue() + ''; //Get current values
var cArray = [];
cArray = v.split(','); //Split the array
function isChild(element, index, array) {
    return cArray.indexOf(element) >= 0;
} //Sort function
var newArray = pArray.filter(isChild); //Store sorted values into new array
this.setValue(newArray.toString()); //Turn array into string, and display it to the drop-down checkbox

Save and preview the effect:

js-checkbox_sort.cpt