新jQuery程序设计基础教程 工业和信息化普通高等教育“十二五”规划教材 教学课件 姚敦红 杨凌 张志美 李晓黎 等编著 第6章.pptVIP

6.5.2 两级级联下拉列表插件DoubleSelection DoubleSelection插件可以将两个Select元素定义的下拉列表级联起来，定义第一个下拉列表的每个列表项对应的第2个下拉列表中的列表项。 DoubleSelection插件的脚本文件是jquery.doubleSelect.js和jquery.doubleSelect.min.js 引用DoubleSelection插件的代码 script type=text/javascript src=jquery.js/script script type=text/javascript src=jquery.doubleSelect.js/script 可以通过下面的方式定义级联关系 var 级联关系变量 = { 第一个下拉列表的列表项1: { key : 键值, defaultvalue : 对应的第2个下拉列表中的默认列表项值, values : { 对应的第2个下拉列表中的列表项: 列表项值, …… } }, …… } }; 可以使用下面的方法将两个Select元素绑定到DoubleSelection插件 第一个Select元素对应的jQuery对象.doubleSelect(第2个Select元素, 级联关系变量); 【例6-18】 在网页中定义2个用于测试的Select元素 select id=first name=first size=1option value=--/option/select select id=second name=second size=1option value=--/option/select 定义级联关系并绑定到DoubleSelection插件的代码 script type=text/JavaScript $(document).ready(function() { var selectoptions = { 蔬菜: { key : 10, defaultvalue : 111, values : { 白菜: 110, 芹菜: 111, 韭菜: 112 } }, 接上 水果: { key : 20, defaultvalue : 212, values : { 苹果: 210, 橘子: 211, 梨: 212, 草莓: 213 } } }; $(#first).doubleSelect(second, selectoptions); }); /script 6.5.3 表单验证插件jquery.validate.js jquery.validate.js是自动对表单中的input元素进行验证的插件，其官网地址如下 http://bassistance.de/jquery-plugins/jquery-plugin-validation/ jquery.validate.js插件的脚本文件就是jquery.validate.js 引用DoubleSelection插件的代码 script type=text/javascript src=jquery.js/script script type=text/javascript src=query.validate.js/script 通过下面的方式将表单绑定到jquery.validate.js插件 $(#表单id).validate(); 用于指定jquery.validate.js插件验证方式的class class 具 体 描 述 required 必选字段