html外部下拉框表格联动,Html下拉框Select联动实例

在开发网站时，经常会有二个或多个select下拉框联动的情况，比如省份和城市二个下拉框联动，在省份下拉框里选择不同的省，第二个下拉框城市就要对应该省份下的城市数据。

下面一起来看下，怎么用Javascript生成这样的联动下拉框。

01、首先，看下我们定义的二个数组的数据，一个arr_class，是班级数据(每条数据包括班级id和班级名称)

另一个是arr_stu，是学生数据(每条数据包括学生id，所属班级，学生名称)。

我们例子做的是班级和学生的二个下拉框的联动。

02、我们的初始Html代码，是二个空的select下拉框控件。

按这样的代码运行，是没有数据的二个下拉框。

03、添加JS逻辑，为二个下拉框生成初始数据，我们先写一个方法，general_select_1，为第一个下拉框填充数据。

代码如图，主要是循环arr_class数组，用数组的每一项来生成一个下拉选项，然后用Jquery的append方法，加到第一个下拉框里，

04、再写一个方法general_select_2，为第二个下拉框填充数据，这个方法接收一个class_id的参数，根据这个参数来过滤填充的数据。比如class_id为1时，就只填充所属班级为1的学生。

这个方法主要是循环arr_stu数组，用数组里符合class_id参数的项来生成一个下拉选项，然后用Jquery的append方法，加到第二个下拉框里，

05、二个方法写好，我们就可以在页面加载完时，调用这二个方法，来填充下拉框的数据，代码如下。

general_select_1();//这个主要是填充第一个下拉框的数据

general_select_2(0);//这个主要是填充第二个下拉框的数据，这里为什么传参数0？因为第一个下拉框里有一个‘请选择班级’的选项，这是个默认选中的选项，这个选项不是一个具体的班级，所以第二个下拉框里不应该有学生的数据。

06、运行后，页面上的二个下拉框都有数据了。

07、我们再为第一个下拉框添加事件代码，当选择一个班级时，就改变第二个下拉框的数据，填充上对应班级的学生数据。

代码很简单，先获取到第一个下拉框选中的项的value值，即选中哪个班级，然后调用方法2，general_select_2，并把选中的班级id做参数传进去就行了，方法2就会根据这个班级的参数过滤到正确的数据后，填充到第二个下拉框里。

varclass_id=(this).val();

general_select_2(class_id);

08、刷新页面后，我们改变第一个下拉框的值，第二个下拉框的学生数据就会跟着改变，实现了二个select的联动。