#javascript #select #option
Вопрос:
Привет, у меня есть меню выбора опций, которое динамически отображается, где я хочу добавить сообщение для определенных вкусов в конце текста опций, например, «Новый» или «Выбор персонала».
В этом случае я хочу добавить «Выбор персонала» в конец банана и киви. Как бы я это сделал? До сих пор мне удавалось выбрать два вкуса, но я не уверен, как бы я добавил копию в конец каждого. Любая помощь в этом была бы признательна
document.querySelectorAll('.form-dropdown').forEach(function(select) {
Array.from(select.options).forEach(function(option) {
if (option.innerText.includes("Banana") || option.innerText.includes("Kiwi")) {
// the below code is set to disabled to show the two flavours have been targeted
option.setAttribute("disabled", true);
}
});
});
<select class="form-dropdown">
<option disabled="" value="">Choose option</option>
<option value="0">Apple</option>
<option value="1">Banana</option>
<option value="2">Cherry</option>
<option value="3">Kiwi</option>
<option value="4">Lemon</option>
</select>
Ответ №1:
Вы сделали трудную часть — просто измените innerText
элемент
document.querySelectorAll('.form-dropdown').forEach(function(select) {
Array.from(select.options).forEach(function(option) {
if (option.innerText.includes("Banana") || option.innerText.includes("Kiwi")) {
// the below code is set to disabled to show the two flavours have been targeted
option.innerText = " (Staff Pick)"
}
});
});
<select class="form-dropdown">
<option disabled="" value="">Choose option</option>
<option value="0">Apple</option>
<option value="1">Banana</option>
<option value="2">Cherry</option>
<option value="3">Kiwi</option>
<option value="4">Lemon</option>
</select>
Комментарии:
1. Ах, спасибо, я попытался использовать .innerText для добавления содержимого, но опустил =, поэтому я не смог заставить его работать. Спасибо!