我有一个带有params的函数,并且正在执行forEach循环以添加循环中的所有值。

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},
]
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的任何方法吗?

最佳答案

如果我理解正确,那么您正在寻找类似的东西。为了简化状态管理,似乎最简单的方法是在选定值更改时重新创建X。



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>

07-24 09:47
查看更多