Replace all options in select element from list

So i have a select element, and i want to replace all of the options inside of the element with a list of options that i have.

Here is the select element:

<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>

Then here is the list that i want to replace the select element options with:

<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>

How would i go about doing this?

Solution

With jQuery, you could empty the list and append each of the items by mapping a list of values to <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>

Non-jQuery Solution

const 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) {
  return el.append(...children);
}

<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>