时间戳

首页 > 解决方案 > 将选项附加到下拉菜单时删除重复项

javascript - 将选项附加到下拉菜单时删除重复项

问题描述

我已经动态创建了下拉列表并使用 json 数组中的数据填充它们。

数据：

data = [{hello: 'abc', asd: '123', fgh: '345' }, 
{hello: 'sdf', asd: '456', fgh: 'df' }, 
{hello: 'ty', asd: '789', fgh: '345675' },
{hello: 'qwe', asd: '123', fgh: '987' }]

键数组（对于我在下拉列表中需要的数据）：arr = ['asd', 'fgh']

下拉菜单的创建：

arr.forEach(c => {
   $('div').append(`
     <div class='float-left'>
     <p>${c}</p>
     <select id='${c}'></select>
    </div>`);
});

要填充下拉列表：

arr.forEach(o => {
   data.forEach(strs => {
      if (strs[o] != null) {
         $(`#${o}`).append(`<option value='${strs[o]}'>${strs[o]}</option>`);
      }
   });
});

我能够填充下拉列表。如何使用NO DUPLICATES填充下拉列表？

标签： javascriptjqueryarraysjsonecmascript-6

解决方案

您可以创建由指定的对象索引的每个值组成的数组，arr并在使用它添加选项之前对其进行重复数据删除。注意我已经结合了你的两个forEach循环；这样做需要id在顶层添加一个div. 如果您不想这样做，则需要再次将它们分开。

data = [{hello: 'abc', asd: '123', fgh: '345' }, 
{hello: 'sdf', asd: '456', fgh: 'df' }, 
{hello: 'ty', asd: '789', fgh: '345675' },
{hello: 'qwe', asd: '123', fgh: '987' }]

arr = ['asd', 'fgh']

arr.forEach(o => {
  $('div#top').append(`
     <div class='float-left'>
     <p>${o}</p>
     <select id='${o}'></select>
    </div>`);
  let vals = data.map(strs => strs[o]);
  vals.filter((v, i) => v !== null && vals.indexOf(v) === i)
      .forEach(v => $(`#${o}`).append(`<option value='${v}'>${v}</option>`));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='top'></div>

推荐阅读