JS+HTML简单实现表单二级联动效果

表单选择栏二级联动

前言:表单的二级联动不可谓不重要,根据第一个选择栏的内容更改下一个选择栏的整体内容在一些场景下是必要的,所以今天以省市为例子利用JS+HTML实现简单的二级联动效果,仅做参考。

 

首先我们思考一下二级表单的产生都需要什么条件

• 以前一个选择栏的内容作为展现下一个选择栏的内容的标识,首先第一个选择栏的内容是一部分数据,下一个选择栏的内容是另一部分数据,并且第一部分数据应该是唯一的一个,第二部分的数据可以是多个,两者之间是一对多的关系,这就需要能够实现这种数据存储的数据结构,二维数组正好可以实现
• JS中的二维数组可以将字符串作为角标,正好满足需求
• 装载数据的二维数组被两个选择栏所共享
• 当第一个选择栏的内容变化时,需要第二个选择栏的内容跟随改变,这就需要触发onchang()方法,编写方法进行内容的更改,这是二级联动的关键

以上便是实现二级联动的条件

现在着手实现二级联动效果

 

1.准备数据,编写HTML代码作为数据显示的位置

这个步骤需要在JS中创建二维数组,并且将HTML页面中的标签编写完整,因为数组中的内容不固定,因此在JS中动态创建select标签中的option,并未select标签设置内容变化触发方法onchange()

并且由于设定了onload()方法,所以在页面加载时,会加载onload()中的方法,initProvince()方法主要是初始化第一个省级选择栏

代码如下

<