Параметр выбора плагинов с неработающим поиском в добавленном параметре

Кто-нибудь знает, как использовать опцию выбора с поиском, но опция добавлена. плагины, которые я пробовал, не могут прочитать добавленную опцию. Кто-нибудь знает, как? Пожалуйста помоги. Благодарю. Плагины, которые я пробовал, это tom-select / seletize / selected.

    const mealOrder = document.getElementById("orderMeal")

    mealOrder.addEventListener('change', function(){
      switch (this.value) {
      
        case "1":
             $("#appendOption").empty();
            $("#appendOption").append(`<option>Hot Dog, Fries and a Soda</option>`+
                              `<option>Burger, Shake and a Smile</option>`+
                              `<option>Sugar, Spice and all things nice</option>`);
          break;
          
        case "2":
           $("#appendOption").empty();
            $("#appendOption").append(`<option>Pizza, Popcorn, Burger</option>`+
                              `<option>Burger, Chicken Wings, Soda</option>`+
                              `<option>Random</option>`);
          break;
          
        case "3":
             $("#appendOption").empty();
             $("#appendOption").append(`<option>Soup. Carbonara, Coke</option>`+
                              `<option>Chocolate Cheese Cake, Coffee</option>`+
                              `<option>Random</option>`);
          break;
           case "0":
             $("#appendOption").empty();
             $("#appendOption").append(`<option>Select</option>`);
             break;
      }
    })
    <script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <select class = "chooseSomething" id = "orderMeal">
            <option value = "0">Select</option>
            <option value = "1">Combo Meal 1</option>
            <option value = "2">Combo Meal 2</option>
            <option value = "3">Combo Meal 3</option>
     </select>
     <select id = "appendOption">
      <option value = "0">Select</option>
     </select>
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
150
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Вы должны уничтожить и повторно инициализировать TomSelect, чтобы обновить select.

Ps: Альтернативы этому подходу, TomSelect API Docs предлагает различные варианты. Вместо этого вы можете использовать функцию removeItem(), а затем добавить их обратно в зависимости от условия. По моему скромному мнению, я думаю, что это лучший подход, чем то, как вы в настоящее время очищаете/добавляете теги option

const mealOrder = document.getElementById("orderMeal")

// Initialize TomSelect and refer the instance to a variable
let mealTomSelect = new TomSelect("#appendOption", {
  sortField: {
    field: "text",
    direction: "asc"
  }
});

mealOrder.addEventListener('change', function() {
  // you have to destroy the TomSelect instance first
  mealTomSelect.destroy();

  switch (this.value) {
    case "1":
      $("#appendOption").empty();
      $("#appendOption").append(`<option>Hot Dog, Fries and a Soda</option>` +
        `<option>Burger, Shake and a Smile</option>` +
        `<option>Sugar, Spice and all things nice</option>`);
      break;

    case "2":
      $("#appendOption").empty();
      $("#appendOption").append(`<option>Pizza, Popcorn, Burger</option>` +
        `<option>Burger, Chicken Wings, Soda</option>` +
        `<option>Random</option>`);
      break;

    case "3":
      $("#appendOption").empty();
      $("#appendOption").append(`<option>Soup. Carbonara, Coke</option>` +
        `<option>Chocolate Cheese Cake, Coffee</option>` +
        `<option>Random</option>`);
      break;
    case "0":
      $("#appendOption").empty();
      $("#appendOption").append(`<option>Select</option>`);
      break;
  }

  // Then re-initialize it
  mealTomSelect = new TomSelect("#appendOption", {
    sortField: {
      field: "text",
      direction: "asc"
    }
  });

})
.ts-wrapper .ts-control .item {
  color: red;
}

.ts-wrapper .ts-dropdown .option {
  color: blue;
}
<link href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/tom-select.bootstrap5.min.css" rel = "stylesheet" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/[email protected]/dist/js/tom-select.complete.min.js"></script>
<select class = "chooseSomething" id = "orderMeal">
  <option value = "0">Select</option>
  <option value = "1">Combo Meal 1</option>
  <option value = "2">Combo Meal 2</option>
  <option value = "3">Combo Meal 3</option>
</select>
<select id = "appendOption">
  <option value = "0">Select</option>
</select>

Оно работает. Большое спасибо! дополнительный вопрос (при любом изменении) - знаете ли вы, как я могу настроить стиль tom-select? например, изменение размера и высоты шрифта.

Mark 01.10.2022 10:43

Я обновил свой ответ, чтобы добавить раздел css для изменения выбора. Вы должны проверить страницу с помощью Chrome Inspect Devtool, получить имя класса, а затем написать для них правило css. Можешь отметить мой ответ как правильный? Рад, что могу помочь :).

Bao Nguyen 01.10.2022 11:19

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