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

Select2 Отображать другое значение после выбора

Я пытаюсь найти обновленный ответ на этот вопрос здесь поскольку кажется, что опция formatSelection для Select2 больше не работает или просто не работает у меня.

По сути, у меня есть меню Select2 с множественным выбором, и я хотел бы, чтобы значение параметра отображалось после выбора, а не было текстовым описанием. Например, у меня есть список провинций, каждая из которых имеет сокращенное значение в качестве значения опции (AB для Альберты, BC для Британской Колумбии и т. д.). Это те, которые я хотел бы иметь отображается после выбора. Есть ли простой способ сделать это в Select2 4.0.0?

Разметка:

<select id="provSelect" multiple data-role="none" >

</select>

для JS:

$("#provSelect").select2({
          width:"100%",
          formatSelection: formatSelection});

С соответствующей функцией:

function formatSelection(item){
         return item.id;
}
jquery jquery-select2 jquery-mobile
29.06.2015

  • Ну, я не думаю, что есть что показать. Я динамически добавляю элементы из текстового файла, поэтому моя разметка пуста. Я обновил свой пост. 29.06.2015

Ответы:


1

В Select2 по-прежнему есть API форматирования, теперь он называется templating. Пример:

function formatState (state) {
    if (!state.id) { return state.text; }
    var $state = $(
        '<span><img src="vendor/images/flags/' + state.element.value.toLowerCase() + '.png" class="img-flag" /> ' + state.text + '</span>'
    );
    return $state;
};

$(".js-example-templating").select2({
    templateSelection: formatState
});

Вы можете по-разному шаблонировать результат и выбор; документы здесь.

29.06.2015
  • Мне пришлось использовать параметр templateSelection вместо templateResult для моих целей, но это дало то, что я хотел :) спасибо, что указали мне правильное направление. 29.06.2015
  • @mbassett Нет проблем, рад, что смог помочь! 29.06.2015

    • 2

    Подборки шаблонов можно найти здесь -> https://select2.org/selections или просмотреть образец ниже:

        function formatState (state) {
  if (!state.id) {
    return state.text;
  }

  var baseUrl = "/user/pages/images/flags";
  var $state = $(
    '<span><img class="img-flag" /> <span></span></span>'
  );

  // Use .text() instead of HTML string concatenation to avoid script injection issues
  $state.find("span").text(state.text);
  $state.find("img").attr("src", baseUrl + "/" + state.element.value.toLowerCase() + ".png");

  return $state;
};

$(".js-example-templating").select2({
  templateSelection: formatState
});
    13.04.2021
    Новые материалы
    Основы принципов S.O.L.I.D, Javascript, Git и NoSQL
    каковы принципы S.O.L.I.D? Принципы SOLID призваны помочь разработчикам создавать надежные, удобные в сопровождении приложения. мы видим пять ключевых принципов. Принципы SOLID были разработаны..
    Как настроить Selenium в проекте Angular
    Угловой | Селен Как настроить Selenium в проекте Angular Держите свое приложение Angular и тесты Selenium в одной рабочей области и запускайте их с помощью Mocha. В этой статье мы..
    Аргументы прогрессивного улучшения почти всегда упускают суть
    В наши дни в кругах веб-разработчиков много болтают о Progressive Enhancement — PE, но на самом деле почти все аргументы с обеих сторон упускают самую фундаментальную причину, по которой PE..
    Введение в Джанго Фреймворк
    Схема «работать умно, а не усердно» В этой и последующих статьях я познакомлю вас с тем, что такое фреймворк Django и как создать свое первое приложение с помощью простых и понятных шагов, а..
    Настольный ПК как «одно кольцо, чтобы править всеми» домашних компьютеров
    Вид после 9 месяцев использования С настольных компьютеров все началось, но в какой-то момент они стали «серверами», и мы все перешли на ноутбуки. В прошлом году я столкнулся с идеей настольных..
    Расширенные методы безопасности для VueJS: реализация аутентификации без пароля
    Руководство, которое поможет вам создавать безопасные приложения в долгосрочной перспективе Безопасность приложений часто упускается из виду в процессе разработки, потому что основная..
    стройный-i18следующий
    Представляем стройную оболочку для i18next. Эта библиотека, основанная на i18next, заключает экземпляр i18next в хранилище svelte и отслеживает события i18next, такие как languageChanged,..