替换从列表中选择元素中的所有选项

Question

所以我有一个选择元素，我想用我拥有的选项列表替换元素内的所有选项。

这是选择元素：

<select class="select optional" 
 name="order[billing_state]" id="order_billing_state">
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AS">AS</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
The rest of the 50 states....</select>

然后这是我想要替换选择元素选项的列表：

<option value=""></option>
<option value="AB">AB</option>
<option value="BC">BC</option>
<option value="MB">MB</option>
<option value="NB">NB</option>
<option value="NL">NL</option>
<option value="NT">NT</option>
<option value="NS">NS</option>
<option value="NU">NU</option>
<option value="ON">ON</option>
<option value="PE">PE</option>
<option value="QC">QC</option>
<option value="SK">SK</option>
<option value="YT">YT</option>

我该怎么做呢？

Answer 1

使用 jQuery，您可以清空列表并通过将值列表映射到<options>.

/** jQuery plugins */
(function($) {
  // Populates a select drop-down with options in a list 
  $.fn.populate = function(list) {
    return this.append(list.map(item => $('<option>', {
      text  : item,
      value : item
    })));
  };
})(jQuery);

var list = ["AB", "BC", "MB", "NB", "NL", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT"];

$('.select.optional').empty().populate(list);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="select optional" name="order[billing_state]" id="order_billing_state">
  <option value="AL">AL</option>
  <option value="AK">AK</option>
  <option value="AS">AS</option>
  <option value="AZ">AZ</option>
  <option value="AR">AR</option>
  <option value="CA">CA</option>
  <option value="CO">CO</option>
</select>

非 jQuery 解决方案

var list = ["AB", "BC", "MB", "NB", "NL", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT"];

populateCombo(emptyCombo(document.querySelector('.select.optional')), list);

function emptyCombo(selectEl) {
  selectEl.options.length = 0;
  return selectEl;
}

function populateCombo(selectEl, items) {
  return appendChildren(selectEl, items.map(item => new Option(item, item)));
}

function appendChildren(el, children) {
  children.forEach(child => el.appendChild(child));
  return el;
}

<select class="select optional" name="order[billing_state]" id="order_billing_state">
  <option value="AL">AL</option>
  <option value="AK">AK</option>
  <option value="AS">AS</option>
  <option value="AZ">AZ</option>
  <option value="AR">AR</option>
  <option value="CA">CA</option>
  <option value="CO">CO</option>
</select>