javascript - 如何从同一个数组中填充多个下拉列表但不重复填充它们？

Question

我正在创建一个页面，让用户可以选择从多个下拉列表中选择名称列表。名称存储在 JS 中的数组中。我已经设法对第一行进行排序，因为这将通过它自己的 id 找到。下一行包含 4 个不同的下拉列表，因此 getElementById 是不可能的（我认为？）。JS 中是否有更简单的方法来做到这一点，而无需为每个下拉列表提供自己的 id 并一遍又一遍地重复该功能？有没有办法避免在任何框中选择相同的名称以避免重复？

下面的代码：

let defenders = 
  [ 'Cafu',           'Roberto Carlos', 'Ashley Cole',    'Gary Neville',      'Danny McGrain',   'Philip Lahm'
  , 'Javier Zanetti', 'Dani Alves',     'Carlos Alberto', 'Franz Beckenbeaur', 'Franco Baresi',   'Paolo Maldini'
  , 'Rio Ferdinand',  'Nemanja Vidic',  'John Terry',     'Billy McNeill',     'Virgil Van Dijk', 'Fabio Cannavaro'
  ] 

var dropdownDF = document.getElementsByClassName("selectDefender");

for (var i = 0; i < defenders.length; i++)
  {
  dropdownDF[dropdownDF.length] = new Option(defenders[i], defenders[i]);
  }

<div class="row df">
  <div class="col-10 offset-1 list-inline-block">
    <ul>
      <li class="col-2 col-md-2 list-inline-item box"><img src="assets/images/male-silhouette.png" alt="male silhouette">
        <div class="player-dropdown">
          <form id="myForm">
            <select class="selectDefender">
              <option>Choose a RB</option>
            </select>
          </form>
        </div>
      </li>
      <li class="col-2 col-md-2 list-inline-item box"><img src="assets/images/male-silhouette.png" alt="male silhouette">
        <div class="player-dropdown">
          <form id="myForm">
            <select class="selectDefender">
              <option>Choose a CB</option>
            </select>
          </form>
        </div>
      </li>
      <li class="col-2 col-md-2 list-inline-item box"><img src="assets/images/male-silhouette.png" alt="male silhouette">
        <div class="player-dropdown">
          <form id="myForm">
            <select class="selectDefender">
              <option>Choose a CB</option>
            </select>
          </form>
        </div>
      </li>
      <li class="col-2 col-md-2 list-inline-item box"><img src="assets/images/male-silhouette.png" alt="male silhouette">
        <div class="player-dropdown">
          <form id="myForm">
            <select class="selectDefender">
              <option>Choose a LB</option>
            </select>
          </form>
        </div>
      </li>
    </ul>
  </div>
</div>

标签： javascripthtmljquerycss