SO-37422949

by David Thomas

HTML

<select class="topicSelect" multiple>
  <optgroup label="Crops">
    <option value="Apiculture">Apiculture</option>
    <option value="Apples">Apples</option>
    <option value="Aquaculture">Aquaculture</option>
    <option value="Blueberries">Blueberries</option>
  </optgroup>
  <optgroup label="Add Option" class="youOwn">
    <option value="own">Add Your Option</option>
  </optgroup>
</select>

JavaScript

function populateExistingDropDowns(dd, array) {
  let dropdown = document.querySelector('.' + dd),
    options = Array.from(dropdown.options);
  array.forEach(function(topic) {
    let opts = options.filter(opt => topic === opt.text);
    if (opts.length) {
      opts.forEach(opt => opt.selected = true);
    } else {
      dropdown.querySelector('optgroup[label=Crops]')
        .appendChild(new Option(topic, topic, true, true));
    }
  });
}

var topicArray = ['Apples', 'Tomatoes'];
populateExistingDropDowns('topicSelect', topicArray);