zoukankan      html  css  js  c++  java
  • 基于jQuery + JSON 的级联选择效果

    昨天做项目的时候遇到了一个填写地址时选择省市的效果,看到了一个非常好用的 js ,这个是基于jQuery + JSON实现的,文件 jquery.cityselect.js 只有5kb 很小很实用。

    html

    首先在 <head>中添加引用 jQuery 和 cityselect 插件。

    <script src="js/jquery.2.1.4.js" type="text/javascript" charset="utf-8"></script> 
    <script src="js/jquery.cityselect.js" type="text/javascript" charset="utf-8"></script> 

    接下来,我们在#city中,放置三个select,并且三个select分别设置class属性为:prov、city、dist,分别表示省、市、区(县)三个下拉框。注意如果只想实现省市二级联动,则去掉第三个dist的select即可。

    jQuery插件调用

    $("#city_1").citySelect({ 
    prov:"湖南", //省份  
    city:"长沙", //城市  
    dist:"岳麓区", //区县  
    nodata:"none", //当子集无数据时,隐藏select  
    required: false 
    }); 

    当然插件信息也是可以扩展的,可以通过 city.url 来绑定数据,但要一定注意数据格式为 JSON 格式的。
    例子:

    $("#city").citySelect({  
    url:{"citylist":[  
    {"p":"前端技术","c":[{"n":"HTML"},{"n":"CSS","a":[{"s":"CSS2.0"},{"s":"CSS3.0"}]},  
    {"n":"JAVASCIPT"}]},  
    {"p":"编程语言","c":[{"n":"C"},{"n":"C++"},{"n":"PHP"},{"n":"JAVA"}]},  
    {"p":"数据库","c":[{"n":"Mysql"},{"n":"SqlServer"},{"n":"Oracle"}]},  
    ]},  
    prov:"",  
    city:"",  
    dist:"",  
    nodata:"none"  
    });  

    你还可以利用PHP等后台语言将数据库中的数据转换成JSON格式,然后使用url参数指向后台地址也能实现无刷新联动效果。

    $("#city").citySelect({  
    url:"data.php"  
    });  

    完整代码地址

  • 相关阅读:
    详解并发和并行意义
    MoleHill Getting Started AGAL(转)
    解决setInterval计时器不准的问题
    Flash视频播放器开发经验总结
    利用pushState开发无刷页面切换
    用小乐图客抓取人人网照片
    如何在Flash中新窗口打开页面而不被拦截
    响应式开发总结
    用Asroute解决复杂状态切换问题
    对iframe跨域通信的封装
  • 原文地址:https://www.cnblogs.com/aoxiaoqiang/p/4975005.html
Copyright © 2011-2022 走看看