多级分类菜单联动选择下拉框
多级分类菜单联动下拉框顾名思义就是一级带一级的,选择祖父级元数据素就能够确定父级元素数据再通过确认父级元素的数据找到子级或者子孙级的元素。在网上有很多的使用三个下拉框实现三级下拉框联动效果,但是有时候我就只想使用一个下拉框实现这种三联动,这个就和之前的三个下拉框的联动就不太一样了。
上图是模仿某商城网的产品类目,将联动下拉框选择的数据结果填充到所属类目的输入框中,从图中可以看出当我选择女装/男装的时候,第二个下拉框就会出现与女装/男装相关的第二选项,再选择女士上装的时候就会出现下一级的相关数据。在上图中女装/男装作为代表的那一列就是祖父级元素,女士上装作为代表的就是父级元素,最后毛呢外套作为代表的就是子级元素也可以说是子孙级元素。因为对于女装/男装来说毛呢外套这属于子孙级元素,对于女士上装来说它又属于子级元素。
现在来看一下使用代码怎么实现此功能
首先分析一下布局,一个容器包括一个input标签,然后使用三个div隐藏在input标签下面