Хобрук: Ваш путь к мастерству в программировании

selectize.js перезагрузить выпадающее меню

У меня есть раскрывающийся список с идентификатором "selectCountry", заполненный ajax, и в случае успеха я просто привязываю Selectize.

$('#selectCountry').selectize({
    create: true,
    sortField: 'text' 
});

Когда я повторно привязываю свой исходный раскрывающийся список с помощью ajax и пытаюсь перезагрузить/перепривязать или обновить старое окно выбора автозаполнения в случае успеха, в старом списке не будет никаких изменений.

Есть ли способ перезагрузить или обновить раскрывающийся список выбора? Я попробовал «clearOptions()» и «refreshOptions()».

P.S. Я не хочу напрямую связывать selectize с ajax.

Хорошо, теперь я добавляю рабочий пример для этой проблемы на jsfiddle.

Пожалуйста, помогите мне :( любое предложение было бы здорово для меня. Большое спасибо


  • тоже пробовал это :(, это бесполезно. 26.05.2015
  • Можете ли вы опубликовать больше кода? 27.05.2015
  • что еще, нужно больше кода :), на самом деле другой код связан с jtable.org, приведенный выше код завершен и работает с первой привязкой раскрывающегося списка. 27.05.2015

Ответы:


1

Каким-то образом я нашел ответ, и он работает здесь

просто добавьте эту строку кода и она заработает.

$('#select-tools').selectize()[0].selectize.destroy();
28.05.2015
  • Есть ли способ заставить Selectize повторно заполнить исходный ‹select› без необходимости уничтожать selectize и терять существующие настройки? 16.12.2016

  • 2

    Похоже, вы также открыли проблему в проекте, которая, ИМХО, не является хорошим использованием вопросы проекта.

    Я ответил там, я повторю ответ здесь, если он может быть полезен другим людям.

    Вы не должны повторно создавать компонент Selectize из исходного тега. Вы должны использовать его для обновления его опций, используя clearOptions(), как вы уже догадались, затем addOption() (несмотря на единственное число, он принимает массив). Я обновил вашу скрипку (+1 за ее создание), чтобы показать это: https://jsfiddle.net/m06c56y0/20/

    Соответствующая часть:

    var selector;
    $('#button-1').on('click', function () {
        selector = $('#select-tools').selectize({
            maxItems: null,
            valueField: 'id',
            labelField: 'title',
            searchField: 'title',
            options: [{
                id: 1,
                title: 'Spectrometer',
                url: 'http://en.wikipedia.org/wiki/Spectrometers'
            }, {
                id: 2,
                title: 'Star Chart',
                url: 'http://en.wikipedia.org/wiki/Star_chart'
            }],
            create: false
        }).data('selectize');
    });
    
    $('#button-2').on('click', function () {
        console.log(selector);
        selector.clearOptions();
        selector.addOption([{
                id: 1,
                title: 'Spectrometer',
                url: 'http://en.wikipedia.org/wiki/Spectrometers'
            }, {
                id: 3,
                title: 'Electrical Tape',
                url: 'http://en.wikipedia.org/wiki/Electrical_tape'
            }]);
    });
    
    28.05.2015
  • вы пропустили мой вопрос. На самом деле, когда я хочу нажать на 1-ю кнопку, она будет привязана к этим значениям, а когда я нажму на 2-ю кнопку, она привяжет 2-е параметры и продолжится со 2-го на 1-й. Я нашел решение и написал ответ. пожалуйста, проголосуйте за :), потому что я не могу проголосовать за свой ответ. 28.05.2015
  • @ObaidAhmed Мне до сих пор не интересно воссоздавать элемент управления Selectize вместо его обновления, но если это действительно то, что вы хотите / должны сделать, я рад, что вы нашли свое решение. Кстати, не забудьте закрыть тему, которую вы открыли... 28.05.2015

  • 3

    Вы также можете сделать это:

    $('#whateverYouCalledIt').selectize()[0].selectize.clear();
    

    просто для очистки того, что было выбрано. Это не очистит ваш список выбора.

    01.02.2017
    Новые материалы

    Разработчики — Избегайте сложностей глупо
    Сложность управляется, а не побеждается «Простота — великая добродетель, но для ее достижения требуется тяжелая работа и образование, чтобы оценить ее. И что еще хуже: сложность продается..

    Как сделать HTML динамическим с помощью JavaScript
    Код JavaScript выполняется внутри страниц сайта. Таким образом, страница вашего сайта содержит метки HTML, а также пояснения (скрипты), составленные с использованием диалекта сценариев, такого как..

    Деревья классификации и регрессии
    Это мой второй пост об алгоритмах машинного обучения. Мой первый пост посвящен искусственным нейронным сетям, вы можете найти его ниже. Нейронные сети — базовое..

    HMTL - Многозадачное обучение для решения задач НЛП
    Достижение результатов SOTA путем передачи знаний между задачами Область обработки естественного языка включает в себя десятки задач, среди которых машинный перевод, распознавание именованных..

    Решения DBA Metrix
    DBA Metrix Solutions предоставляет удаленного администратора базы данных (DBA), который несет ответственность за внедрение, обслуживание, настройку, восстановление базы данных, а также другие..

    Начало работы с Блум
    Обзор и Codelab для генерации текста с помощью Bloom Оглавление Что такое Блум? Некоторые предостережения Настройка среды Скачивание предварительно обученного токенизатора и модели..

    Создание кнопочного меню с использованием HTML, CSS и JavaScript
    Вы будете создавать кнопочное меню, которое имеет состояние наведения, а также позволяет вам выбирать кнопку при нажатии на нее. Финальный проект можно увидеть в этом Codepen . Шаг 1..