js实现表单联动

来源:互联网 发布:知乎live 网页版 编辑:程序博客网 时间:2024/05/10 18:02

最近做的一个小demo,原生js实现表单联动。演示地址:表单联动
我的github地址:源码地址,友情Star一下,谢谢

实现效果如图:
这里写图片描述
这里我只记录一下核心代码思想。

首先页面代码如下:
这里写图片描述

声明一个变量存放二级表单的内容
这里写图片描述

下面就是实现联动效果的核心代码
这里写图片描述
其中说下selectedIndex.属性可设置或返回下拉列表中被选选项的索引号。在这里,area是一级表单,如果选中该表单的某一个选择项,那么对应的就要是二级表单内容。最后通过遍历,依次把对应二级表单内容添加进页面。

0 0