Нажмите Значения для Multi Select

Question

Мне нужно выдвинуть значения, которые я получаю из базы данных, в множественный выбор. Ниже код будет выдвигать данные в текстовую область на основе onchange в select. Мне нужно изменить текстовую область на multi select. Как этого добиться?Вызов метода ниже, например

HTML

<select id="select-execution-group-update" class="form-control" onchange="getParamListForCustomGroupUpdate()">

// JS-файл

    function getParamListForCustomGroupUpdate() {

var selected_execution_group = document.getElementById("select-execution-group-update").value;

$.ajax({
    method: "GET",
    dataType: "text",
    url: "getObjectList",
    data: {
        execution_group_name: selected_execution_group
    },
    success: function (result) {
        result = result.replace(/\\/g, "");
        document.getElementById("object_custom_name").value = result;
    }

}

);

}

Answer 1

Вы просто должны заменить текстовую область множественным выбором и добавить значение в этом множественном выборе.

<select id="select-execution-group-update" class="form-control" onchange="getParamListForCustomGroupUpdate()">
<select id='multi-select' ...>

//JS file

    function getParamListForCustomGroupUpdate() {

var selected_execution_group = document.getElementById("select-execution-group-update").value;

$.ajax({
    method: "GET",
    dataType: "text",
    url: "getObjectList",
    data: {
        execution_group_name: selected_execution_group
    },
    success: function (result) {
        result = result.replace(/\\/g, "").split(',');
        var arrayLength = result.length;
        for (var i = 0; i < arrayLength; i++) {
            var option = document.createElement("option");
            option.text = result[i];
            option.value = result[i];
            var select = document.getElementById("multi-select");
            select.appendChild(option);    
        }
    }
}

);

Answer 2

 function getParamListForCustomGroupUpdate() {

var selected_execution_group = document.getElementById("select-execution-group-update").value;

$.ajax({
    method: "GET",
    dataType: "text",
    url: "getObjectList",
    data: {
        execution_group_name: selected_execution_group
    },
    success: function (result) {
        // result in array
        result = result.replace(/\\/g, "");
        referenceNode = document.getElementById("object_custom_name");
        //document.getElementById("object_custom_name").value = result;
        var myDiv = document.getElementById("myDiv");

        //Create and append select list
        var selectList = document.createElement("select");
        selectList.id = "mySelect";
        myDiv.appendChild(selectList);

        //Create and append the options
        for (var i = 0; i < result.length; i++) {
           var option = document.createElement("option");
           option.value = result[i];
           option.text = result[i];
           selectList.appendChild(option);
        }
        referenceNode.parentNode.insertBefore(myDiv, referenceNode.nextSibling);
    }

}