时间戳

首页 > 解决方案 > 在从下拉列表中选择时将对象添加到数组。如果未选中，则从数组中删除

javascript - 在从下拉列表中选择时将对象添加到数组。如果未选中，则从数组中删除

问题描述

我有一个带参数的函数，我正在执行一个 forEach 循环来添加循环中的所有值。

对象：

'values':
[
{date: '10-10-2020', abc: 1, xyz: 5, pqr: 6, jkl: 1, mno: 9},
{date: '10-07-2020', abc: 3, xyz: 4, pqr: 1, jkl: 6, mno: 1},
{date: '10-09-2020', abc: 7, xyz: 2, pqr: 9, jkl: 3, mno: 0},
]
colors=['#000', '#fff', '#f8f8f8']

const data = (sd) => Object.entries(obj).map(([k, g]) => ({
  ['name']: k,
  ['data']: g.map(entry => entry[sd]),
  ['type']: sd,
  ['color']: colors[i++ % colors.length],
}));

然后我将它们推入一个巨大的数组中：

let arr = ['abc', 'xyz', 'pqr', 'jkl', 'mno'];
let x = [];
arr.forEach(y => {
  x = [...x, ...data(y)];
});

我还有一个以数组值作为项目的多选下拉列表。第一个是在加载时选择的。

有什么办法让我已经填充了数组的第一项x并在选择时将相应的项添加到数组中。在取消选择时，我想从数组中删除该项目。我不确定如何从这里开始。

我的下拉代码：

arr.forEach(c => {$(`#mydropdown`).append(`<option value='${c}'>${c}</option>`);});
$(`select#mydropdown option[value='abc']`).prop('selected', 'selected');

$(`#mydropdown`).on('change', function() {
   $('option:selected', this).each(function() {
      // Add to 'x'
   });
});

我有什么方法可以x通过单击和解锁来添加/删除吗？

标签： javascriptjqueryarraysobjectecmascript-6

解决方案

如果我理解正确，您正在寻找这样的东西。For simplicity of managing the state, it seems easiest to just recreate X when selected values change.

const obj = {
'values': [
  {date: '10-10-2020', abc: 1, xyz: 5, pqr: 6, jkl: 1, mno: 9},
  {date: '10-07-2020', abc: 3, xyz: 4, pqr: 1, jkl: 6, mno: 1},
  {date: '10-09-2020', abc: 7, xyz: 2, pqr: 9, jkl: 3, mno: 0},
  ]
};

const colors=['#000', '#fff', '#f8f8f8'];

let i = 0;
const data = (sd) => Object.entries(obj).map(([k, g]) => ({
  ['name']: k,
  ['data']: g.map(entry => entry[sd]),
  ['type']: sd,
  ['color']: colors[i++ % colors.length],
}));

let arr = ['abc', 'xyz', 'pqr', 'jkl', 'mno'];
let x = [data('abc')];
console.log(x);
/*
arr.forEach(y => {
  x = [...x, ...data(y)];
});
*/

arr.forEach(c => {$(`#mydropdown`).append(`<option value='${c}'>${c}</option>`);});
$(`select#mydropdown option[value='abc']`).prop('selected', 'selected');

$(`#mydropdown`).on('change', function() {
   x = [];
   $('option:selected', this).each(function() {
      x.push(data($(this).val()));
   });
   console.log(x);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<select multiple id="mydropdown">
</select>

推荐阅读