从Javascript数组中创建一个没有重复项的HTML下拉列表

Create an HTML Dropdown From a Javascript Array Without Duplicates

本文关键字：下拉列表 HTML 一个 数组 Javascript 创建      更新时间：2023-09-26

使用先前回答的SO问题作为参考，我创建了一个函数，该函数从现有的javascript数组中填充HTML文档中的下拉列表。

HTML:

<fieldset>
    <legend>Choose action</legend>
        <p>Choose your action and click next</p><br />
            <select id="trigger"></select>
</fieldset>

Javascript:

var guns =
    [
        ["Smith and Wesson 500", "Revolver", "Full Frame", 50, "sada"], //model, type, frame, cal, trigger
        ["Glock 19", "Semi", "Compact", 9, "striker"],
        ["Smith and Wesson M and P Shield 9", "Semi", "Compact", 9, "striker"],
        ["Ruger Alaskan", "Revolver", "Full Frame", 44, "dao"],
        ["Ruger SR9", "Semi", "Compact", 9, "striker"],
        ["Desert Eagle", "Semi", "Full Frame", 50, "sada"],
        ["Smith and Wesson M and P Shield 40", "Semi", "Compact", 40, "striker"]
    ]   
var triggerDropdown = function(){
    var sel = document.getElementById('trigger');
    for (var i = 0; i < guns.length; i++) {
        var opt = document.createElement('option');
        opt.innerHTML = guns[i][4];
        opt.value = guns[i][4];
        sel.appendChild(opt);
        }
    };
我挑战:

填充trigger ，不复制。此外，解决方案一定不需要我永久地改变guns(我发现了其他一些有用的SO帖子，但其中大多数涉及首先从数组中删除重复项…在本例中，我没有这个选项)。

谢谢!

您可以使用触发器创建一个单独的数组:

var triggers = function(guns) {
  var unique = {};
  return guns.reduce(function(current, item) {
    if (!(item[4] in unique)) {
      current.push(item[4]);
      unique[item[4]] = 1;
    }
    return current;
  }, []);
}(guns);

然后按常规遍历triggers。

参见:Array.reduce()

在构建列表时，要在本地跟踪已经使用过的键:

var triggerDropdown = function(){
    var already = {};
    var sel = document.getElementById('trigger');
    for (var i = 0; i < guns.length; i++) 
    {
      var val = guns[i][4];
      if (! already[val]) 
      {
        var opt = document.createElement('option');
        opt.innerHTML = val;
        opt.value = val;
        sel.appendChild(opt);
        already[val] = true;
      }
    }
};
相关文章：