Как я могу добавить выбранные значения параметров в множественный выбор jQuery из формы HTML?

Question

Я использую множественный выбор jQuery и хочу добавить к нему значения параметров из формы.

В коде, который я создал до сих пор, у меня есть «food: ma c & сыр "и" добавки: витамин Е "выбран. Если я наберу «кокс» в поле ввода и выберу «напитки» из раскрывающегося списка, как я могу добавить его как «напитки: кокс» в мой jQuery множественный выбор при очистке формы (поэтому дополнительный текст и раскрывающиеся элементы можно добавить)?

редактировать: мой вопрос в том, как я могу выбрать «напитки: кокс», чтобы он был синим (и серым в раскрывающемся списке после его выбора), например «food: ma c & cheese «и» добавки: витамин е »в форме HTML? извините, если я плохо объяснил раньше.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slim-select/1.26.0/slimselect.min.css" rel="stylesheet"></link>

<select id="multiple" multiple>
  <option value="value 1">drinks: lemonade</option>
  <option value="value 2">food: hot dog</option>
  <option value="value 3" selected>food: mac & cheese</option>
  <option value="value 4">food: pizza</option>
   <option value="value 8" selected>supplements: vitamin e</option>
</select>
<br><br>
<form>
  <label for="fname">food name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="type">Choose a label:</label>
  <select name="type" id="type">
    <option value="value 5">food</option>
    <option value="value 6">drinks</option>
    <option value="value 25">drugs</option>
    <option value="value 50">supplements</option>
  </select><br><br>
   <input type="submit" value="Add">
</form>

<script type="text/javascript">//<![CDATA[
new SlimSelect({
  select: '#multiple'
})
  //]]></script>

Answer 1

попробуйте это

new SlimSelect({
  select: '#multiple'
});

const btnAdd = document.querySelector('input[type="submit"]');

btnAdd.addEventListener('click', function(e) {
e.preventDefault();

let input = document.querySelector('#fname');
let select = document.querySelector('#type');
let selectOptions = document.querySelectorAll('#type > option');
let selectMultiple = document.querySelector('#multiple');

// create option element
let option = document.createElement('option');
let optionContent = selectOptions[select.selectedIndex].textContent+':'+input.value;
option.value = optionContent;
option.textContent = optionContent;

// insert in select multiple
selectMultiple.appendChild(option);

// reset input and select
input.value = '';
select.selectedIndex = 0;

})