我有一个带有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>