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

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

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

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

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


回答:

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

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)


回答:

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

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

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


回答:

感觉是个样式-数据结构的设计问题。
你这个样式在 antd 里面是这个 https://ant.design/components...,
人家一个级连选择器的数据结构是一个树:
请问大家一个 困扰我一天的问题,现在还没想明白怎么处理
在选择的时候把这个树的每个值取出来返回:

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

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

以上是 请问大家一个 困扰我一天的问题,现在还没想明白怎么处理 的全部内容, 来源链接: utcz.com/p/936427.html

回到顶部