Почему раскрывающееся меню select2 отображается только в первой строке моей таблицы?

Привет всем, я пытаюсь сделать выпадающее меню с помощью select2. У меня возникла проблема с раскрывающимся меню select2. Выпадающее меню select2 по какой-то причине отображается только в первой строке моей таблицы. Но я не понимаю, почему это происходит. Я хочу, чтобы раскрывающееся меню select2 отображалось во всем столбце администратора, а не только в первой строке.

вот мой код таблицы

                    <tbody id = "myTable">
                        <tr class = "table">
                            <td class = "table">email</td>
                            <td class = "table">name</td>
                            <td class = "table">
                                <form>
                                    <select id = "isAdmin">
                                        <option selected>false</option>
                                        <option value = "false">false</option>
                                        <option value = "true">true</option>
                                    </select>
                                </form>
                            </td>
                            <td class = "table">bhv</td>
                        </tr>
                    </tbody>

Вот мой код select2

    var isAdmin;
    $('#isAdmin').select2({
        placeholder: 'Choose..',
    });
    $("#isAdmin").on("select2:select select2:unselect", function (e) {
        //this returns all the selected item
        isAdmin = $(this).val();
    })

Вот таблица в браузере

Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
Раскрытие чувствительных данных
Раскрытие чувствительных данных
Все внешние компоненты, рассмотренные здесь до сих пор, взаимодействуют с клиентской стороной. Однако, если они подвергаются атаке, они не...
Разница между тегами Br и Wbr в HTML 5
Разница между тегами Br и Wbr в HTML 5
В целом, оба тега <br> и <wbr> имеют свои уникальные цели и функциональные возможности, и их использование зависит от конкретных требований к дизайну...
HTML И VS CODE Для Веб-разработки
HTML И VS CODE Для Веб-разработки
Прежде чем начать кодировать html в "VS CODE", мы должны сначала создать папку и назвать ее x.html, здесь я принимаю x как имя файла, который мы...
Как использовать WAI-ARIA
Как использовать WAI-ARIA
В моем текущем новом проекте почти все компоненты не учитывают веб-доступность. Моя нынешняя компания - это стартап, поэтому они не заботились о...
Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.
Статическая веб-страница, созданная с помощью CSS и HTML - до и не до.
Я потратил некоторое время на создание своего сайта-портфолио. Затем, гордясь собой, я разместил свой код на серверах amazon. Мне потребовалось время,...
0
0
393
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Используйте класс вместо идентификатора,

На странице не может быть 2 или более элементов с одинаковым значением идентификатора.

                <tbody id = "myTable">
                    <tr class = "table">
                        <td class = "table">email</td>
                        <td class = "table">name</td>
                        <td class = "table">
                            <form>
                                <select class = "isAdmin">
                                    <option selected>false</option>
                                    <option value = "false">false</option>
                                    <option value = "true">true</option>
                                </select>
                            </form>
                        </td>
                        <td class = "table">bhv</td>
                    </tr>
                </tbody>

Затем вар isAdmin; $('.isAdmin').select2({ заполнитель: 'Выбрать..', }); $(".isAdmin").on("select2:select select2:unselect", function (e) { //это возвращает весь выбранный элемент isAdmin = $(это).val(); })

Другие вопросы по теме