开发学院网页设计JavaScript 通用三级联动下拉列表 阅读

通用三级联动下拉列表

 2010-04-20 00:00:00 来源:WEB开发网   
核心提示:用Jquery实现,原始代码只支持IE,通用三级联动下拉列表,这里我改了一下,我的代码里面有三个版本的实现第一个是通过读取XML构建,或者直接不设置参数配置如下,配置select的三个ID和默认值就行,支持IE/firefox,chrome不支持

用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现

第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题

第二个是采用Json数据格式构建,是我的第二次尝试改进

第三个与第二个其实是一样的,只不过将数据分离到JS文件中,我的代码中有一个ASP文件,是调用数据库生成Json省市区数据的,如果页面直接调用ASP文件,速度会很慢,生成JS文件后直接调用就要快的多,而且这部分数据一般不会改动

更新记录:

++2010-04-19 12:11:24

多加了一个插件的例子,其实不算插件,就是一函数,为什么不写成插件,只是基于灵活性的考虑,

让select可以放在页面的任何位置,而不是局限在div、table、td等页面元素内

参数类似下面,s1/s2/s3配置select的id,v1/v2/v3为默认值,如果不想设置请设置为null,或者直接不设置

参数配置如下,配置select的三个ID和默认值就行,无默认值填写为null

  var defaults = {
      s1:'Select1',
      s2:'Select2',
      s3:'Select3',
      v1:null,
      v2:null,
      v3:null
  };

这算是第四个例子,目录下的php文件是服务端数据的生成Demo,用作使用的参考

数据格式定义类似如下:

 1 var threeSelectData={
 2 "省份":{val:"",items:{"城市":{val:"",items:{"区县":""}}}},
 3     "beijing":{val:"01",items:{
 4         "bj-01":{val:"0101",items:{
 5             "bj-01-01":"010101"
 6         }},
 7         "bj-02":{val:"0102",items:{
 8             "bj-02-01":"010201",
 9             "bj-02-02":"010202"
10         }}
11     }},
12     "shanxi":{val:"02",items:{}},
13     "guangzhou":{val:"02",items:{}}
14 };

1 2  下一页

Tags:通用 三级 联动

编辑录入:爽爽 [复制链接] [打 印]
[]
  • 好
  • 好的评价 如果觉得好,就请您
      0%(0)
  • 差
  • 差的评价 如果觉得差,就请您
      0%(0)
赞助商链接