Html下拉框Select联动实例 _小知识

在开发网站时，经常会有二个或多个select下拉框联动的情况，比如省份和城市二个下拉框联动，在省份下拉框里选择不同的省，第二个下拉框城市就要对应该省份下的城市数据。 <br/>下面一起来看下，怎么用Javascript生成这样的联动下拉框。操作方法 01 首先，看下我们定义的二个数组的数据，一个arr_class，是班级数据（每条数据包括班级id和班级名称）
另一个是 arr_stu，是学生数据（每条数据包括学生id，所属班级，学生名称）。
我们例子做的是班级和学生的二个下拉框的联动。

文章插图

02 我们的初始Html代码，是二个空的select下拉框控件。
按这样的代码运行，是没有数据的二个下拉框。

文章插图

文章插图

03 添加JS逻辑，为二个下拉框生成初始数据，我们先写一个方法，general_select_1，为第一个下拉框填充数据。
代码如图，主要是循环arr_class数组，用数组的每一项来生成一个下拉选项，然后用Jquery的app方法，加到第一个下拉框里，

文章插图

04 再写一个方法general_select_2，为第二个下拉框填充数据，这个方法接收一个class_id的参数，根据这个参数来过滤填充的数据。比如class_id为1时，就只填充所属班级为1的学生。
这个方法主要是循环arr_stu数组，用数组里符合class_id参数的项来生成一个下拉选项，然后用Jquery的app方法，加到第二个下拉框里，

文章插图

05 二个方法写好，我们就可以在页面加载完时，调用这二个方法，来填充下拉框的数据，代码如下。
general_select_1(); //这个主要是填充第一个下拉框的数据
general_select_2(0); //这个主要是填充第二个下拉框的数据，这里为什么传参数0？因为第一个下拉框里有一个‘请选择班级’的选项，这是个默认选中的选项，这个选项不是一个具体的班级，所以第二个下拉框里不应该有学生的数据。

文章插图

06 【Html下拉框Select联动实例】运行后，页面上的二个下拉框都有数据了。

文章插图

文章插图

07 我们再为第一个下拉框添加事件代码，当选择一个班级时，就改变第二个下拉框的数据，填充上对应班级的学生数据。
代码很简单，先获取到第一个下拉框选中的项的value值，即选中哪个班级，然后调用方法2，general_select_2，并把选中的班级id做参数传进去就行了，方法2就会根据这个班级的参数过滤到正确的数据后，填充到第二个下拉框里。