【Asp.net精品源码栏目提醒】:以下是网学会员为您推荐的Asp.net精品源码-【精品】TP7V1.0 - 其它资料,希望本篇文章对您学习有所帮助。
第七章表单验证的高级特效 本章任务制作通用的省市级联效果 演示示例1:页面效果 演示示例1:页面效果制作学期、课程级联效果 演示示例2:页面效果 演示示例2:页面效果 本章目标会使用下拉列表框控件实现省市级联功能会使用数组优化省市级联功能 实现简单的省市级联功能 如何实现省市级联的效果? 页面效果 onChange onChange 选项/内容改变事件 选项/内容改变事件 动态添加 动态添加 城市选项Option 城市选项Option1、利用省份下拉框的选项改变事件onChange2、根据用户选择的省份,动态添加城市下拉框的值 实现简单的省市级联功能演示实现步骤:1、添加省份、城市下拉框(演示素材) 表单名称 表单名称 myform myform 省份下拉框名称 省份下拉框名称 selProvince selProvince 城市下拉框名称 城市下拉框名称 selCity selCity 省份下拉框选项 省份下拉框选项 option option 实现简单的省市级联功能演示实现步骤:2、查看生成的HTML代码 选项 选项...... Option Option--请选择开户帐号的省份-- 多个选项构成 多个选项构成四川省 选项数组 选项数组山东省 options options湖北省 ...... 城市下拉框暂 城市下拉框暂--请选择开户帐号的城市-- 时没有具体的 时没有具体的 城市选项 城市选项 ...... 实现简单的省市级联功能演示实现步骤: 查看源代码3、添加动态改变城市选项的changeCity 函数 1、获取用户选 1、获取用户选function changeCity 择的省份 择的省份 var provincedocument.myform.selProvince.value var newOption1newOption2 switchprovince 2、根据用户选择的省份, 2、根据用户选择的省份, 动态创建城市下拉框选项 动态创建城市下拉框选项 case 四川省 : newOption1 new Option成都市chengdu newOption2 new Option泸州市luzhou break 3、清除原有的选项 3、清除原有的选项 case 湖北省 : …… document.myform.selCity.options.length0 document.myform.selCity.options.addnewOption1 document.myform.selCity.options.addnewOption2 4、将选项添加到选项数组options 4、将选项添加到选项数组options 实现简单的省市级联功能演示实现步骤: 查看源代码4、选择下拉框的onChange事件,调用事件函数 当用户选择不同的省份 当用户选择不同的省份 时,将调用函数,改变 时,将调用函数,改变 城市下拉框的选项 城市下拉框的选项……--请选择开户帐号的省份--四川省山东省湖北省…… 实现简单的省市级联功能 选项数组 选项数组小结下拉框控件SELECT: 1、每个选项Option可以动态创建 1、每个选项Option可以动态创建 new Option”显示内容”,“值” new Option”显示内容”,“值” 常用属性 2、动态添加选项 2、动态添加选项 selCity.options.addnewOption1) selCity.options.addnewOption1) length 3、清除选项 3、清除选项 value selCity.options.length0 selCity.options.length0 options selectedIndex 读取或设置被选项的索引号, 读取或设置被选项的索引号, 第一个为0,其他类推 第一个为0,其他类推 常用事件 onChange 选项改变事件 选项改变事件 onBlur onFocus 小结1实现学期、课程的级联 练习答案 学期 学期 第一学期 第一学期 第二学期 第二学期 第二学年 第二学年 各学期对应课程 各学期对应课程 第一学期:HTML、Java 第一学期:HTML、Java 第二学期:Sqlserver、.Net 第二学期:Sqlserver、.Net 第二学年:Struts、Ajax 第二学年:Struts、Ajax 使用数组优化省市级联功能 每个省实际上有很多城市、并且城市数量不等, 有没有更简单、通用的办法?var newOption1newOption2 如果有很多城市,就需 如果有很多城市,就需switchprovince 要定义很多变量,编写 要定义很多变量,编写 case 四川省 : 很多重复的代码 很多重复的代码 newOption1 new Option成都市chengdu newOption2 new Option泸州市luzhou break case 湖北省 : newOption1 new Option武汉市wuhan newOption2 new Option襄樊市xiangfan break case 山东省 : newOption1 new Option青岛市qingdao newOption2 new Option烟台市yantai 使用数组优化省市级联功能JavaScript中的数组用法: 查看源代码 使用数组优化省市级联功能 JavaScript中的数组用法: 查看源代码 1、创建数组,可 1、创建数组,可 3、循环输出. 3、循环输出. 0-表示四川省的索引号,同理可 0-表示四川省的索引号,同理可 以换为山东省-索引号1 以换为山东省-索引号1 使用数组优化省市级联功能 用数组优化解决省市级联问题: 1、用数组存放每个 1、用数组存放每个 2、根据用户选择的省份索引 2、根据用户选择的省份索引 省份包含的城市 省份包含的城市 号,找到对应的数组索引号 号,找到对应的数组索引号 一维数组: cityList 数组索引号 下拉框索引号cityList0 0 selectedIndex 0cityList1 1 1 2cityList2 2 3 3、根据对应的数组内 3、根据对应的数组内 1 容,添加城市选项到城 容,添加城市选项到城 市下拉框中 市下拉框中 使用数组优化省市级联功能 用数组优化解决省市级联问题: 查看源代码function changeCity 1、创建数组,存放 1、创建数组,存放 各省份对应城市 各省份对应城市 var cityList new Array cityList0成都 绵阳 德阳 自贡 … 泸州 cityList1济南 青岛 ‘… 日照 cityList2 武汉 宜昌 … 潜江 2、根据用户选择的省份索引 2、根据用户选择的省份索引 号,获取对应数组索引号 号,获取对应数组索引号 var pIndexdocument.myform.selProvince.selectedIndex-1 var newOption1 document.myform.selCity.options.length0 for var j in cityListpIndex 3、清空原下拉框内容 3、清空原下拉框内容 newOption1new OptioncityListpIndexj cityListpIndexj document.myform.selCity.options.addnewOption1 4、根据数组内容创建选 4、根据数组内容创建选 项,并添加到城市下拉框 项,并添加到城市下拉框 小结2用数组优化学期、选修课程的级联。
练习答案各学期对应课程各学期对应课程第一学期:HTML、Java、SqlServer基础、C第一学期:HTML、Java、SqlServer基础、C第二学期:JavaScript、SqlServer高级、.Net、JSP第二学期:JavaScript、SqlServer高级、.Net、JSP第二学年:Struts、
ASP.NET、Ajax、Spring、Hibernate第二学年:Struts、
ASP.NET、Ajax、Spring、Hibernate 使用文字下标的数组再次优化 使用索引号必须要求省份的排列顺序和数组编号相同。
……cityList0成都 ... 泸州四川省cityList1济南 …日照山东省cityList2武汉 …潜江湖北省cityList3合肥…‘ 亳州安徽省cityList4东莞 …珠海广东省cityList5桂林… 贺州广西省cityList6贵阳 …遵义贵州省……当30多个省份罗列在一起时容易搞错当30多个省份罗列在一起时容易搞错对应关系,有没有更直观的办法对应关系,有没有更直观的办法 使用文字下标的数组再次优化1、JavaScript中的数组下标可以采用标识符代替。
例如: cityList山东省 济南 青岛 淄博 枣庄 东营 烟台 潍坊 济宁 泰安 威海 日照2、可以根据用户选择的value值,与数组下标标识 进行比较,从而找出该省包括的城市。
使用文字下标的数组再次优化用文字下标的数组优化省市级联菜单: 查看源代码 数组下标采用文字 数组下标采用文字function changeCity 标识符代替 标识符代替 var cityList new Array cityList‘四川省’成都 绵阳 … 泸州 根据省份下拉框的 根据省份下拉框的 cityList‘山东省’济南 青岛 ‘… 日照 值,获取对应数组 值,获取对应数组 cityList‘湖北省’ 武汉 宜昌 … 潜江 的索引标识 的索引标识 var pIndexdocument.myform.selProvince.value var newOption1 document.myform.selCity.options.length0 for var j in cityListpIndex 数组的读取和数字 数组的读取和数字 索引方式相同 索引方式相同 newOption1new OptioncityListpIndexj cityListpIndexj document.myform.selCity.options.addnewOption1 常见错误
上一篇:
Micro Focus白盒测试解决方案
下一篇:
村落共同体的核心架构研究