Как добавить текст в конец текста выбранного параметра с помощью javascript?

#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 для добавления содержимого, но опустил =, поэтому я не смог заставить его работать. Спасибо!