Как создать список стран, используя массив в JavaScript?у меня всего 10 или больше, выберите страну на странице

Question

Как создать список стран, используя массив с помощью js?у меня есть всего 10 или более выбрать страну на странице.я хочу создать, используя имя класса.

var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa" /*, ... */ );

function country() {
  var x = "<option disabled>Select Country</option>";
  
  for (var i = 0; i < country_arr.length; i++) {
    var node = country_arr[i];
    x += "<option value='" + country_arr[i] + "'> " + country_arr[i] + " </option>"
  }

  var countryElement = document.getElementsByClassName('country');
  countryElement.innerHTML = x;
  document.getElementsByClassName("country").innerHTML = x;
}

<div style='text-align:center;'>
  <select class="country" name="country"></select>
  <select class="country" name="country"></select>
  <select class="country" name="country"></select>
</div>

<script>
  country();
</script>

Answer 1

Приведенный ниже код будет циклически проходить по массиву, создавать опцию и затем добавлять ее ко всем выборам с помощью .country.Это решение использует jquery.

var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa");

country_arr.forEach( function(obj) {
  var temp_country = new Option(obj, obj);
  $(temp_country).html(obj);
  $("select.country").append(temp_country);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select class="country" name ="country"></select>
<select class="country" name ="country"></select>
<select class="country" name ="country"></select> </div>

Answer 2

Вам нужно перебрать элементы HTMLCollection, которые вы получаете с document.getElementsByClassName("country"):

var country_arr = new Array("Afghanistan", "Albania", "Algeria", "American Samoa" /*, ... */ );

function country() {
  var x = "<option disabled>Select Country</option>";
  
  for (var i = 0; i < country_arr.length; i++) {
    var node = country_arr[i];
    x += "<option value='" + country_arr[i] + "'> " + country_arr[i] + " </option>"
  }
  
  let list = document.getElementsByClassName("country");
  for (let item of list) {
    item.innerHTML = x;
  }

}

country();

<div style='text-align:center;'>
  <select class="country" name="country"></select>
  <select class="country" name="country"></select>
  <select class="country" name="country"></select>
</div>