Подскажите как сделать из этого выбор ролей как нас крине? Во фронте не шарю а сделать надо к приложению

// функция конструирует страницу для добавления юзера
function showAddUserPanel() {
    // вызываем функцию для построения вкладок
    showTabs();

    // Конструкция заголовка таблицы
    $("#allUsersSubHeader").children().remove();
    $(
        "<h3>&nbsp;Add new user</h3>"
    ).appendTo("#allUsersSubHeader");

    // Конструкция формы с добавлением юзера
    $("#tableInputArea").children().remove();
    $(
        "<div class=\"row\">\n" +
        "                            <div class=\"col-4\"></div>\n" +
        "                            <div class=\"col-4\">\n" +
        "                                <form id='formNewUser'>\n" +
        "                                    <table class=\"table bg-white align-middle table-borderless\">\n" +
        "                                        <tbody>\n" +
        "                                        <tr>\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <label for=\"firstName_add\">Enter name:</label>\n" +
        "                                            </div>\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <input class=\"form-control\" type=\"text\" id=\"firstName_add\" name=\"firstName\">\n" +
        "                                            </div>\n" +
        "                                        </tr>\n" +
        "                                        <tr>\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <label for=\"lastName_add\">Enter Last Name:</label>\n" +
        "                                            </div>\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <input class=\"form-control\" type=\"text\" id=\"lastName_add\" name=\"lastName\">\n" +
        "                                            </div>\n" +
        "                                        </tr>\n" +
        "                                        <tr>\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <label for=\"age_add\">Enter age:</label>\n" +
        "                                            </div>\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <input class=\"form-control\" type=\"text\" id=\"age_add\" name=\"age\">\n" +
        "                                            </div>\n" +
        "                                        </tr>\n" +
        "                                        <tr>\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <label for=\"email_add\">Enter Email:</label>\n" +
        "                                            </div>\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <input class=\"form-control\" type=\"email\" id=\"email_add\" name=\"email\">\n" +
        "                                            </div>\n" +
        "                                        </tr>\n" +
        "                                        <tr id=\"rolesCheckboxes\">\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <label for=\"password_add\">Enter Password:</label>\n" +
        "                                            </div>\n" +
        "                                            <div class=\"text-center\">\n" +
        "                                                <input class=\"form-control\" type=\"password\" id=\"password_add\" name=\"password\">\n" +
        "                                            </div>\n" +
        "                                        </tr>\n" +
        
        "                                        <tr>\n" +
        "                                            <td class=\"text-center btn-lg\" colspan=\"2\">\n" +
        "                                                <input class=\"btn btn-success\" type=\"button\" onclick=\"addNewUserFunction()\" value=\"ADD NEW USER\"/>\n" +
        "                                            </td>\n" +
        "                                        </tr>\n" +
        "                                        </tbody>\n" +
        "                                    </table>\n" +
        "                                </form>\n" +
        "                            </div>\n" +
        "                            <div class=\"col-4\"></div>\n" +
        "                        </div>"
    ).appendTo("#tableInputArea");
    // формируем список ролей с чекбоксами
    findRolesList().then(r => r.map(role => {
        $("#rolesCheckboxes").after(
            "<tr><select class=\"container-fluid\">\n" +
            "<label for=\"" + role.role + "\" class=\"form-select\">" + role.role.replace("ROLE_ADMIN", "Admin").replace("ROLE_USER", "User") + "</label>\n" +
            "</select>" +
            "<select class=\"text-center\">" +
            "<input name=\"roles\" id=\"" + role.role + "\" class=\"form-check-input\" type=\"checkbox\"  multiple value=\"" + role.id + "\"/></select></tr>")
    }));
}

// Конструкция вкладок
function showTabs() {
    $("#adminPanelNavTabs").children().remove();
    $(
        "<tr>" +
        "<th>" +
        "<ul class=\"nav nav-tabs fw-normal\">" +
        "<li class=\"nav-item\">" +
        "<a class=\"nav-link\" onclick=\"showAllUsers()\">Users table</a>" +
        "</li>" +
        "<li class=\"nav-item\">" +
        "<a class=\"nav-link active\" onclick=\"showAddUserPanel()\">New user</a>" +
        "</li>" +
        "</ul>" +
        "</th>" +
        "</tr>"
    ).appendTo("#adminPanelNavTabs");
}

введите сюда описание изображения


Ответы (1 шт):

Автор решения: Burr_DI

Используйте тег select:

 <select>
     <option>Role 1</option>
     <option>Role 2</option>
 </select>
→ Ссылка