javascript - 将三个选择菜单中的元素切入和切出数组
问题描述
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
var array = [];
let sel1 = false;
function myFunct1() {
var one = select1.options[select1.selectedIndex].value;
if(array.length === 1 && !sel1) array.unshift(one);
else array.splice(0,1,one);
console.log(array);
sel1 = true;
}
function myFunct2() {
var two = select2.options[select2.selectedIndex].value;
array.splice(sel1, 1, two);
console.log(array);
}
function myFunct3() {
var three = select3.options[select3.selectedIndex].value;
}
<select id = 'select1' onchange = 'myFunct1()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog1'>Dog</option>
<option value = 'Cat1'>Cat</option>
<option value = 'Bear1'>Bear</option>
</select>
<select id = 'select2' onchange = 'myFunct2()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog2'>Dog</option>
<option value = 'Cat2'>Cat</option>
<option value = 'Bear2'>Bear</option>
</select>
<select id = 'select3' onchange = 'myFunct3()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog3'>Dog</option>
<option value = 'Cat3'>Cat</option>
<option value = 'Bear3'>Bear</option>
</select>
我有这种方法可以完全按照我想要的方式使用两个选择菜单。因此,如果您从第二个中连续选择两次,则数组的长度永远不会超过一个,直到您从第一个中选择。现在我想加入第三个选择菜单。请帮我完成这项工作。我知道我可以将它们全部组合成一个功能,而不必处理这些问题,但为了我的使用,我不能这样做。主要条件是数组中永远不会有来自同一个选择菜单的多个选择,并且数组中永远不会有任何空位置仍然计入其长度。所以不会出现 [undefined, Cat2] 的数组。
解决方案
简单的方法是:
- 创建两个数组,即
realArr
(将字符串保留在原始索引处)。例如值 fromselect1
将始终我们设置为realArr[0]
和 fromselect2
torealArr[1]
... - 第二个数组
showArr
是您将undefined
使用删除的数组filter()
var select1 = document.getElementById('select1');
var select2 = document.getElementById('select2');
var select3= document.getElementById('select3');
var realArr = [];
var showArr = [];
function myFunct1() {
var one = select1.options[select1.selectedIndex].value;
realArr[0] = one;
showArr = realArr.filter(x => x !== undefined);
console.log(showArr);
}
function myFunct2() {
var two = select2.options[select2.selectedIndex].value;
realArr[1] = two
showArr = realArr.filter(x => x !== undefined);
console.log(showArr);
}
function myFunct3() {
var three = select3.options[select3.selectedIndex].value;
realArr[2] = three;
showArr = realArr.filter(x => x !== undefined);
console.log(showArr);
}
<select id = 'select1' onchange = 'myFunct1()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog1'>Dog</option>
<option value = 'Cat1'>Cat</option>
<option value = 'Bear1'>Bear</option>
</select>
<select id = 'select2' onchange = 'myFunct2()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog2'>Dog</option>
<option value = 'Cat2'>Cat</option>
<option value = 'Bear2'>Bear</option>
</select>
<select id = 'select3' onchange = 'myFunct3()'>
<option disabled selected value> -- select an option -- </option>
<option value = 'Dog3'>Dog</option>
<option value = 'Cat3'>Cat</option>
<option value = 'Bear3'>Bear</option>
</select>
推荐阅读
- azure - 我们如何向一个本地数据网关添加多个订阅?
- airflow - 使用“with dag as DAG(...)”子句创建 DAG 是否有好处
- reactjs - react-admin 展开 Unknown dataProvider 功能:getOne
- sql - 在将插入脚本生成为动态查询时,即使列是 nvarchar,此 N 也不会得到前缀
- google-sheets - 如何计算谷歌电子表格中的对称差异
- c - malloc 和 free 的内存管理
- python - 将相同值传递给参数的紧凑方法
- javascript - 如何向使用 for 循环呈现到页面的数组中的特定项目添加验证?
- python - 是否可以使用另一个列表和字典自动从列表创建 XML 文件?
- django - Django注释子查询的聚合