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就会根据这个班级的参数过滤到正确的数据后，填充到第二个下拉框里。 var class_id = $(this).val(); general_select_2(class_id);
- 08
刷新页面后，我们改变第一个下拉框的值，第二个下拉框的学生数据就会跟着改变，实现了二个select的联动。
- End
免责声明：
本页搜狗指南内容仅代表作者本人意见，若因此产生任何纠纷由作者本人负责，概与搜狗公司无关。本页搜狗指南内容仅供参考，请您根据自身实际情况谨慎操作。尤其涉及您或第三方利益等事项，请咨询专业人士处理。
