Кто-нибудь знает, как использовать опцию выбора с поиском, но опция добавлена. плагины, которые я пробовал, не могут прочитать добавленную опцию. Кто-нибудь знает, как? Пожалуйста помоги. Благодарю. Плагины, которые я пробовал, это 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>


![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вы должны уничтожить и повторно инициализировать 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>Я обновил свой ответ, чтобы добавить раздел css для изменения выбора. Вы должны проверить страницу с помощью Chrome Inspect Devtool, получить имя класса, а затем написать для них правило css. Можешь отметить мой ответ как правильный? Рад, что могу помочь :).
Оно работает. Большое спасибо! дополнительный вопрос (при любом изменении) - знаете ли вы, как я могу настроить стиль tom-select? например, изменение размера и высоты шрифта.