Add elements to AJS multiselect by JS

I want to create a multi-user-picker field in custom page (as plugin configuration), my code is:

function initAllUserPickers() {
    $( ".cust_userPicker" ).each(function( index, element ) {
        initOneUserPicker($( this ));
    });
}

function initOneUserPicker(element) {
    var $el = AJS.$(element);
    var x = new AJS.MultiSelect({
        element: element,
        itemAttrDisplayed: "label",
        showDropdownButton: false,
        ajaxOptions:  {
            data: function (query) {
                return {
                    query: query,
                    exclude: $el.val()
                }
            },
            url: AJS.params.baseURL + "/rest/api/2/user/picker",
            query: true,
            formatResponse: JIRA.UserPickerUtil.formatResponse
        }
    });
}

This code works perfectly but I have one more requirement for this field (it is not custom field within the meaning of the Jira, it is just html field). I need to add to the field some users when the page is ready just using javascript, It should look like some users have already been chosen - get the list of ‘already chosen’ users by custom rest api (so have this list in javascript).

I tried to build html elements and append it to page structure but it looks ugly…
Is the any ‘add’ method or something like that (for javascript)?

Does anyone have any idea how to do it?

Hi, I know maybe my answer is a bit late, but I have searched the same and did not succeed.

I have fought with this AJS.MultiSelect for 2 days and finally I did it.

So first of all you can simply trigger your select by this simple steps:

// your select
var currentSelect = AJS.$('#your_select_id') 
// option to select
var optionToSelect = currentSelect.find('option[value={value to be selected}]') 
// if option exists get descriptor of that option
if (optionToSelect.length > 0) {
    optionToSelect.prop("selected", true); // set selected property to 'true'
    var descriptor = optionToSelect.data("descriptor"); // get option descriptor
    currentSelect.trigger("selectOption", descriptor);  // trigger section element
}

If you does not have any option in your select you can create own descriptor object and trigger your select. There will be less code:

// your selection element
var currentSelect = AJS.$('#your_select_id') 
// custom descriptor
var descriptor = {
   label: 'foo',
   value: 'bar',
   model: new Option('foo', 'bar')
}
// trigger
currentSelect.trigger("selectOption", descriptor);

To remove selection use “removeOption” instead of “selectOption”.

Hope this info saves someone time :grinning:

2 Likes

The AJS.Multiselect is actually a Select2. Have a look at the documentation of Select2 https://select2.org/.