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)();general_select_2(class_id);
(08)刷新页面后,我们改变第一个下拉框的值,第二个下拉框的学生数据就会跟着改变,实现了二个select的联动。
-
实例讲解Flash中如何制作旋转球体动画
Flash是一款专门用来制作动画的软件工具,在网上就有很多的破解版本,下载破解绿色版本的安装包比较容易安装。Flash的界面简洁,功能齐全。现在,我们用实际例子看看怎么在Flash中制作旋转球体动画吧。操作方法(01)新建文档双击桌面上的fla图标,打开软件。在动画软件菜单...
-
CDR怎么排弧形文字?
在使用cdr进行排版时,如何排出弧形文字呢,下面我们就来看看CDR是怎么排弧形文字的吧其效果如图所示:操作方法(01)在桌面上双击cdr的快捷图标,打开cdr这款软件,进入cdr的操作界面,如图所示:(02)在该界面的工具区里找到3点曲线工具如图所示:(03)使用3点曲线工具,在绘图区里绘制...
-
百度云使用磁链接
百度云现在已经更名为百度网盘。百度网盘不仅存储功能强大,而且下载功能也很强大。今天小编就告诉大家如何用百度网盘网页版和百度网盘手机客户端下载磁力链接。百度网盘手机客户端下载磁力链接方法(01)首先打开我们的百度网盘手机客户端,点击进入右下角菜单栏的更...
-
支付宝怎么注销账户
支付宝(中国)网络技术有限公司是国内领先的第三方支付平台,致力于提供“简单、安全、快速”的支付解决方案。支付宝公司从2004年建立开始,始终以“信任”作为产品和服务的核心。旗下有“支付宝”与“支付宝钱包”两个独立品牌。自2014年第二季度开始成为当前全球最...