Question

所以我有一个select元素，我想用一个选项列表替换元素中的所有选项。

这是select元素：

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

然后，这里是我想用以下内容替换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>来附加每个项目。

＆＃13;

/** 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);

＆＃13;

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

＆＃13;

非jQuery解决方案

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

jquery的另一个选项是清空选项，因为Mr.Polywhirl说并循环遍历您的选项数组并将它们附加到现在空的下拉列表中。

  var newOptions = {"AB": "AB",
  "BC": "BC",
  "MB": "MB"
};

var $el = $("#order_billing_state");
$el.empty(); // remove old options
$.each(newOptions, function(key,value) {
  $el.append($("<option></option>")
     .attr("value", value).text(key));
});

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

Answer 3

这个普通的 JS 选项可以解决问题：

HTML：

<select id="your_select_option_id_name">
  <option value="a">Option A</option>
  <option value="b">Option B</option>
</select>

Javascript

var outletOptions = document.querySelector("#your_select_option_id_name");

// Remove existing options
Array.from(outletOptions).forEach((option) => {
  outletOptions.removeChild(option)
})

// get or set your new options here.
var newOutletOptions = [["option name 1", "firstValue"], ["option name 2", "secondValue"]]

// Add new options
newOutletOptions.map((optionData) => {
  var opt = document.createElement('option')
  opt.appendChild(document.createTextNode(optionData[0]));
  opt.value = optionData[1]
  outletOptions.appendChild(opt);
})

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

3 个答案:

非jQuery解决方案