Question

我制作了带有两个下拉菜单的表单：

 <select id="selectAccountCurrency"></select>

和

 <select name="Valutatype" id="selectCurrencyType"></select>

使用此功能可在下拉菜单中填充各种货币：

function loadAllCurrencyKeys() {
  var keys = Object.keys(ECurrencyTypes);
  for (var index = 0; index < keys.length; index++) {
      var currencyKey = keys[index];
      var newOption = document.createElement("option");
      newOption.value = currencyKey;
      newOption.text = ECurrencyTypes[currencyKey].name;
      selectCurrencyType.options.add(newOption);
  }

for (var index = 0; index < keys.length; index++) {
      var currencyKey = keys[index];
      var newOption = document.createElement("option");
      newOption.value = currencyKey;
      newOption.text = ECurrencyTypes[currencyKey].name;
      selectAccountCurrency.options.add(newOption);
  }
}

有没有一种方法可以缩短第二个for循环？那里似乎有很多重复。

其他信息：这是我要同时在两个下拉菜单中列出的对象：

  var ECurrencyTypes = {
NOK: {value:1.00000, name: "Norske kroner", denomination: "kr"},
EUR: {value:0.10733, name: "Europeiske euro", denomination: "€"},
USD: {value:0.12652, name: "United States dollar", denomination: "$"},
GBP: {value:0.09550, name: "Pound sterling", denomination: "£"},
INR: {value:8.18624, name: "Indiske rupee", denomination: "र"},
AUD: {value:0.16129, name: "Australienske dollar", denomination: "A$"},
PHP: {value:6.48595, name: "Filippinske peso", denomination: "₱"},
SEK: {value:1.02580, name: "Svenske kroner", denomination: "kr"},
CAD: {value:0.15841, name: "Canadiske dollar", denomination: "C$"},
THB: {value:4.18410, name: "Thai baht", denomination: "฿"}
};

这是一些带有字段集和选择标签的html代码：

<fieldset>
    <label for="txtAmount">Amount: </label>
    <input type="text" id="txtAmount">
    <label for="selectCurrencyType"> in </label>
    <select name="Valutatype" id="selectCurrencyType"></select>
</fieldset>

和

<fieldset>
    <label for="selectAccountCurrency">Currency:</label>
    <select id="selectAccountCurrency"></select>
</fieldset>

Answer 1

第二个循环只是要为两个select添加相同的选项，但是它们必须是两个不同的HTML元素。

仅使用一个循环，克隆元素，然后将一个附加到第一个选择，将克隆的一个附加到另一个选择，所以您只有一个循环，它们将是两个不同的HTML元素，而不是相同的HTML元素：

function loadAllCurrencyKeys() {
  var keys = Object.keys(ECurrencyTypes);
  for (var index = 0; index < keys.length; index++) {
      var currencyKey = keys[index];
      var newOption = document.createElement("option");
      newOption.value = currencyKey;
      newOption.text = ECurrencyTypes[currencyKey].name;
      selectCurrencyType.options.add(newOption);
      selectAccountCurrency.options.add(newOption.clone(true)); // <- see the .clone
  }
}

Answer 2

所有其他答案似乎都是正确的，但是您可以通过在Object.entries()循环中使用destructuring syntax和for...of来使代码更简洁一些：

function loadAllCurrencyKeys() {
  for (const [key, value] of Object.entries(ECurrencyTypes)) {
    const newOption = document.createElement("option");
    newOption.value = key;
    newOption.text = value;
    selectCurrencyType.options.add(newOption);
    selectAccountCurrency.options.add(newOption.clone(true));
  }
}

如果您有两个以上的<select>元素，则也可以通过将它们传递给函数来对其进行迭代：

function loadAllCurrencyKeys(...selects) {
  for (const [key, value] of Object.entries(ECurrencyTypes)) {
    let newOption = document.createElement("option");
    newOption.value = key;
    newOption.text = value;

    for (const select of selects) {
      select.options.add(newOption);
      newOption = newOption.clone(true);
    }
  }
}

loadAllCurrencyKeys(selectCurrencyType, selectAccountCurrency);

唯一的缺点是克隆<option>的时间比每种货币类型所需的时间多，尽管这很可能是微不足道的开销。

Answer 3

您可以只使用一个for循环，然后在将其插入到第二个下拉列表中之前先创建的clone newOption。

function loadAllCurrencyKeys() {
  var keys = Object.keys(ECurrencyTypes);
  for (var index = 0; index < keys.length; index++) {
    var currencyKey = keys[index];
    var newOption = document.createElement("option");
    newOption.value = currencyKey;
    newOption.text = ECurrencyTypes[currencyKey].name;
    
    selectCurrencyType.options.add(newOption);
    
    var clonedNewOption = newOption.clone(true);
    
    selectAccountCurrency.options.add(clonedNewOption);
  }
}

Answer 4

如果下拉列表中的值不同；

function loadAllCurrencyKeys(data, select) {
      var keys = Object.keys(data);
      for (var index = 0; index < keys.length; index++) {
          var currencyKey = keys[index];
          var newOption = document.createElement("option");
          newOption.value = currencyKey;
          newOption.text = ECurrencyTypes[currencyKey].name;
          select.options.add(newOption);
      }
    }

以及代码中的其他地方；

loadAllCurrencyKeys(ECurrencyTypes, selectCurrencyType);
loadAllCurrencyKeys(ECurrencyTypes, selectAccountCurrency);

如果两个下拉菜单的下拉菜单值都相同，则可以在for循环中对下拉列表元素进行硬编码。即

selectCurrencyType.options.add(newOption);
selectAccountCurrency.options.add(newOption);

如何避免在javascript for循环中重复代码？

4 个答案: