使用JavaScriptjQuery实现页面特效第四章-实践.pptVIP

* 实践四 JavaScript对象 实践目标 实现省市级联 实现表单验证 使用数组保存数据，实现级联特效。 （1）对公司的员工进行管理时，根据选择的部门，动态添加该部门的员工姓名。 （2）页面加载完毕后，第一个列表框填充公司的所有部门，第二个列表框填充第一个部门的所有员工姓名。 （3）当选择部门时，如“研发部”， 第二个下拉列表框首先清除选项，然后再填充“研发部”的员工姓名。 任务一：使用数组，实现级联特效 任务一：使用数组，实现级联特效 （1）在脚本中，声明使用文字作为数组元素下标的全局数组变量，储存部门名称和员工姓名。 （2）声明函数initDep ()，在第一个列表框中填充所有的部门名称。 （3）声明函数fillEmps()，把在第一个列表框中选择的部门所对应的员工姓名填充到第二个列表框中。 （4）给body标签的onload事件绑定initDep()方法和fillEmps()方法。 （5）给第一个列表框select标签的onchange事件绑定fillEmps()方法。 任务一：使用数组，实现级联特效 任务一：使用数组，实现级联特效 var emps = new Array(); emps[人力资源部] = [刘青,周毅,周州,王贝贝]; emps[市场部] = [陈海, 徐洋, 裴红, 龚小明, 陈建]; emps[研发部] = [代天, 刘波, 陈博, 胡灵, 周康, 赵瑞]; function initDep() {//初始化部门列表 var depObj = document.getElementById(selDepartment); for (var index in emps) {//index依次迭代数组的文字下标 var option = document.createElement(option); //创建元素 option.text = index; option.value = index; depObj.options.add(option); } } 任务一：使用数组，实现级联特效 function fillEmps() { var empObj = document.getElementById(selEmployee); empObj.options.length = 0; //清除列表项 var currentDep = document.getElementById(selDepartment).value; //获取选择的部门 for (var index in emps[currentDep]) { var option = document.createElement(option); option.text = emps[currentDep][index]; option.value = emps[currentDep][index]; empObj.options.add(option); } } ...... body onload=initDep(),fillEmps() p 请选择姓名：/p 部门：select id=selDepartment onchange=fillEmps()/select 姓名：select id=selEmployee/select /body 注册美淘网的会员时，根据用户选择的省份，动态添加城市。 任务一：使用数组，实现级联特效 （1）声明使用文字作为数组元素下标的数组，储存省和市。 （2）声明函数initData()，在第一个列表框中填充所有的省。 （3）声明函数fillCity()，把在第一个列表框中选择的省所对应的市填充到第二个列表框中。 （4）给body标签的onload事件绑定initData()方法和fillCity()方法。 （5）给第一个列表框select标签的onchange事件绑定fillCity()方法。 任务一：使用数组，实现级联特效 使用String对象的方法，实现表单验证。 验证注册页面时，要求用户输入的用户名、密码和确认密码均符合格