请问大家一个 困扰我一天的问题，现在还没想明白怎么处理

Question

图上是一个 左右联动的菜单选择

我想点击确认的时候，获取选中的城市，我试过点击右侧每一个城市的时候，都把它的值push到一个新数组，但是我却不好做去重，因为再点下是取消，我就必须要从这个数组里删除它，而且我又不好通过splice 的方式，用索引值去删除，因为如果切换到左侧别的城市， 右侧的索引值又是从0 开始，

所以我根本无法找到我存入的值，也不能在再次点击的时候，把它从数组移除， 请问这个问题，有什么比较好的解决方法吗？

Answer 1

function setArea(s1, s2) {
    var select = {};
    if (!select[s1]) {
        select[s1] = [];
    }
    var index = select[s1].indexOf(s2);//判断是否存在
    if (index == -1) {
        select[s1].push(s2);//新增
    } else {
        select[s1].splice(index, 1);//删除
    }
    return select;
}

var thisSelect1 = '浙江';//点击一级菜单
var thisSelect2 = '杭州';//点击二级菜单
setArea(thisSelect1, thisSelect2)
thisSelect2 = '温州';//点击二级菜单
setArea(thisSelect1, thisSelect2)
thisSelect1 = '江苏';//点击一级菜单
thisSelect2 = '南京';//点击二级菜单
setArea(thisSelect1, thisSelect2)

Answer 2

这种场景最合适的方案是 <label> + <input type="checkbox">，可以完美解决你的问题，不需要任何 JS。

需要一些 CSS 知识，主要利用 + 选择器。我这里有一个小例子：https://codepen.io/meathill/p...

我之前还做过更完整的视频，推荐看一下，类似这样的问题都可以轻松面对：https://ke.segmentfault.com/c...

Answer 3

感觉是个样式-数据结构的设计问题。
你这个样式在 antd 里面是这个 https://ant.design/components...，
人家一个级连选择器的数据结构是一个树：

在选择的时候把这个树的每个值取出来返回：

要做的事情就是用 options 递归渲染列表，点击的时候返回递归路径就行了。
每次点击就把这个递归路径存起来。
展示选中状态，就用储存路径+当前层数匹配。