html外部下拉框表格联动,Html下拉框Select联动实例
在开发⽹站时，经常会有⼆个或多个select下拉框联动的情况，⽐如省份和城市⼆个下拉框联动，在省份下拉框⾥选择不同的省，第⼆个下拉框城市就要对应该省份下的城市数据。
下⾯⼀起来看下，怎么⽤Javascript⽣成这样的联动下拉框。
01、⾸先，看下我们定义的⼆个数组的数据，⼀个arr_class，是班级数据(每条数据包括班级id和班级名称)
另⼀个是arr_stu，是学⽣数据(每条数据包括学⽣id，所属班级，学⽣名称)。
我们例⼦做的是班级和学⽣的⼆个下拉框的联动。
02、我们的初始Html代码，是⼆个空的select下拉框控件。
按这样的代码运⾏，是没有数据的⼆个下拉框。
jquery ajax例子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的联动。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。