第九章.表单验证的高级特效.pptxVIP

第九章表单验证的高级特效回顾用图片代替提交按钮，应如何实现表单验证？简述制作回车Tab切换特效的大致步骤。简述制作即时提示错误特效的大致步骤。实现内容动态改变有哪两种方法？本章案例制作通用的省市级联效果演示示例1：课堂案例/回车切换输入/改进后的注册页面.html页面效果学习目标会使用下拉列表框控件实现省市级联功能会使用数组优化省市级联功能一、实现简单的省市级联功能课堂案例/ProvinceCity1.htm页面效果如何实现省市级联的效果？onChange选项/内容改变事件动态添加城市选项Option1、利用省份下拉框的选项改变事件onChange2、根据用户选择的省份，动态添加城市下拉框的值表单名称myform省份下拉框名称selProvince城市下拉框名称selCity省份下拉框选项option演示实现步骤： 2、查看生成的HTML代码FORM name=myform ...... SELECT name=selProvince OPTION--请选择开户帐号的省份--/OPTION OPTION value=四川省四川省/OPTION OPTION value=山东省山东省/OPTION OPTION value=湖北省湖北省/OPTION /SELECT ...... SELECT name=selCity OPTION--请选择开户帐号的城市--/OPTION /SELECT ....../FORM选项Option多个选项构成选项数组options城市下拉框暂时没有具体的城市选项课堂案例/ProvinceCity1.htm查看源代码演示实现步骤： 3、添加动态改变城市选项的changeCity( )函数1、获取用户选择的省份function changeCity( ){ var province=document.myform.selProvince.value; var newOption1,newOption2; switch(province) { case 四川省 : newOption1= new Option(成都市,chengdu); newOption2= new Option(泸州市,luzhou); break; case 湖北省 : …… } document.myform.selCity.options.length=0; document.myform.selCity.options.add(newOption1); document.myform.selCity.options.add(newOption2); }2、根据用户选择的省份，动态创建城市下拉框选项3、清除原有的选项4、将选项添加到选项数组options课堂案例/ProvinceCity1.htm查看源代码演示实现步骤： 4、选择下拉框的onChange事件，调用事件函数当用户选择不同的省份时，将调用函数，改变城市下拉框的选项……SELECT name=selProvince onChange=changeCity( ) OPTION--请选择开户帐号的省份--/OPTION OPTION value=四川省四川省/OPTION OPTION value=山东省山东省/OPTION OPTION value=湖北省湖北省/OPTION/SELECT……选项数组1、每个选项Option可以动态创建new Option(”显示内容”，“值”)2、动态添加选项selCity.options.add(newOption1）3、清除选项selCity.options.length=0小结下拉框控件SELECT：常用属性lengthvalueoptionsselectedIndex常用事件onChangeonBluronFocus读取或设置被选项的索引号，第一个为0，其他类推选项改变事件小结1实现学期、课程的级联课堂案例/课堂练习/练习1答案.htm练习答案学期第一学期第二学期第二学年 各学期对应课程第一学期：HTML、Java第二学期：Sqlserver、.Net第二学年：Struts、Ajax解决办法：使用数组！每个省实际上有很多城市、并且城市数量不等，有没有更简单、通用的办法？var newOption1,newOption2; switch(province){ case 四川省 : newOption1= new Option(成都市,chengdu); newOption2= new Option(泸州市,luzhou); break; case 湖北省 : newOption1= new Option(武汉市,wuhan); newOption2= new Option(襄樊市,xiangfan); br