js实现无需数据库的县级以上联动行政区域下拉控件
代码共享url:
http://code.google.com/p/region-select-js/
数据已经更新到中国统计局网站中的2012年的那批数据(制作后未核对);
下拉使用div模拟实现.可以定制样式
支持ie6/ch/ff/op
按照设计,应该可以支持无限级数据树;但是数据并非随需加载,而是全部加载.如果数据达到街道级别,或是包含国外行政区域,会比较大
相关推荐
-
js操纵跨frame的三级联动select下拉选项实例介绍
运用HTML.CSS以及Javascript相关知识,编写多窗口多菜单的内容联动. 考察学生关于frame.浏览器对象,以及表单控件的概念,javascript事件触发机制和程序设计, 以及用CSS来组织文字展示的掌握程度,使学生对DHTML有更加深刻的理解. 实验内容[必做] (1)建立一个包含三个frame的窗口 (2)第一个frame1中包含一个select,内容是中国的各个省 (3)第二个frame2中同样含有一个select,内容是各省的地级市 (4)第三个frame3用来显示关于某地
-
js实现一个省市区三级联动选择框代码分享
运行效果: ================================================= 部分代码: ================================================= 当然首先你数据库中要有这个table,不然你没有数据.....^_^ 复制代码 代码如下: <tr> <td class="tr pr10 "> 所在地: </td> <td class="tl">
-
ASP+JS三级联动下拉菜单[调用数据库数据]
网上三级菜单多是多但是代码都比较烦,我这个应该说还是比较直观的:'肯定先要连接数据库了,不用说了 '数据库结构 '类别1表名称:a 字段:ID,Name 说明:ID为主键是类别1的ID值,Name为类别1的名称 '类别2表名称:aa 字段:ID,aID,Name 说明:ID为主键是类别2的ID值,aID为所属类别1的ID值,Name为类别2的名称 '类别3表名称:aaa 字段:ID,aID,aaID,Name 说明:ID为主键是类别3的ID值,aID为所属类别1的ID值,aaID为所
-
JS实多级联动下拉菜单类,简单实现省市区联动菜单!
作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.
-
js操作二级联动实现代码
表结构 二级或多级联动主要是以数据库中具有父编号的表为基础,这个也不例外 id,parent_id,name 三列. 采用js操作 先说下数据在js中的存储方式. 主要用二维数组来存储数据.结构如下: a[父编号]=[[子编号1,子名称1],[子编号2,子名称2],[子编号3,子名称3],--]; 首先用父编号获取所有的子数据,在把子数据的编号及名称绑定在dropdown中 第一步 二级联动数据(后面说这些数据怎么得到) 复制代码 代码如下: var cities=new Array(); ci
-
jquery+json 通用三级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进
-
js实现无需数据库的县级以上联动行政区域下拉控件
代码共享url: http://code.google.com/p/region-select-js/ 数据已经更新到中国统计局网站中的2012年的那批数据(制作后未核对); 下拉使用div模拟实现.可以定制样式 支持ie6/ch/ff/op 按照设计,应该可以支持无限级数据树;但是数据并非随需加载,而是全部加载.如果数据达到街道级别,或是包含国外行政区域,会比较大
-
JS实现的5级联动Select下拉选择框实例
本文实例讲述了JS实现的5级联动Select下拉选择框.分享给大家供大家参考.具体如下: 这是一个基于JS的5级联动Select下拉选择框,这里演示的仅是一个示例,没有做汉化,当初从老外网站扒下时花了很多时间,当然我们平时用时候可能不需要这么多级,意在介绍一种编写方法和思路,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-select-5-option-codes/ 具体代码如下: <title>一个基于JS的5级联动Se
-
js实现兼容性好的微软官网导航下拉菜单效果
本文实例讲述了js实现兼容性好的微软官网导航下拉菜单效果.分享给大家供大家参考.具体如下: 这是一款微软官网导航菜单,兼容好的下拉菜单,微软官网导航效果,在IE6下没有动画效果,顺便也把IE6的效果给加上,兼容IE6.现在微软的官方网站正在使用,我觉得非常不错. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-microsoft-web-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-/
-
jQuery制作简洁的多级联动Select下拉框
今天我们要来分享一款很实用的jQuery插件,它是一个基于jQuery多级联动的省市地区Select下拉框,并且值得一提的是,这款联动下拉框是经过自定义美化过的,外观比浏览器自带的要漂亮许多.另外,这个Select下拉框也可以绑定下拉事件,并获取当前选中项的值. html代码: 复制代码 代码如下: <div class="wrap"> <div class="nice-select" name="nice-select&
-
vue.js实现单选框、复选框和下拉框示例
Vue.js可以很方便的实现数据双向绑定,所以在处理表单,人机交互方面具有很大的优势.下边以单选框.复选框和下拉框为例介绍他们在HTML和Vue.js中的具体实现方式. 一.单选框 在传统的HTML中实现单选框的方法如下: <div id="app"> <input type="radio" name="gender" value="man" id="man"/><label
-
按下Enter焦点移至下一个控件的实现js代码
复制代码 代码如下: <html> <head> <title>Enter2Tab</title> <script type="text/javascript"> window.onload=function(){ var list = new Array(); for(var i=5;i<document.all.length;i++) { if(document.all[i].type=="text&quo
-
vue省市区三联动下拉选择组件的实现
我们曾经经常会遇到需要选择省市区的需求,我们可能是找一个插件来实现,但是有了vue之后,我们自己完全可以简单的实现这个效果,并封装为独立的.vue组件,便于日后使用 我们今天来实现一个 利用vuejs开发的 省市区三联动的组件 CitySelect.vue组件 首先来看一下最终的效果(没有写太多的样式...) 组件所需要的省市区的JSON数据(已经封装为commonjs模块了): provinces.js 这个数据中有这样几个字段: code: 当前省市区的编码 sheng: 当前所在的
-
JS中artdialog弹出框控件之提交表单思路详解
artDialog是一个基于javascript编写的对话框组件,它拥有精致的界面与友好的接口. 前言: 自适应内容 artDialog的特殊UI框架能够适应内容变化,甚至连外部程序动态插入的内容它仍然能自适应,因此你不必去考虑消息内容尺寸使用它.它的消息容器甚至能够根据宽度让文本居中或居左对齐--这一切全是XHTML+CSS原生实现. 完善的接口 它的接口完善,可以轻易与外部程序配合使用.如异步写入消息.控制位置.尺寸.显示与隐藏.关闭等. 细致的体验 如果不是在输入状态,它支持Esc快捷键关
-
详解Android 多级联动控件实现思路讨论
最近有一个需求是选择多级联动数据,数据级别不固定,可能是五级,可能是两级,具体看用户等级. 所以就需要一个多级联动选择控件 ,在网上一番搜索或找到了这个控件, Android-PickerView 这个控件在三级以内的的联动都没有问题,但是最多只能到三级. 我在原有的基础上做了一些扩展,主要是添加了两个 picker MultiWheelPickerView 可以根据数据动态生成多个滚轮,不再局限于两个三个选项 DynamicWheelPickerView 也是动态生成,但可以一级一级的加载数据
随机推荐
- Android实现QQ图片说说照片选择效果
- java使用xpath解析xml示例分享
- NiftyCube——轻松实现圆角边框
- oracle存储过程中return和exit区别概述及测试
- javascript小技巧 超强推荐第1/5页
- 在Apache环境下成功的运行ASP.NET的注意事项
- C#泛型Dictionary的用法实例详解
- ASPJPEG综合操作的CLASS类
- ASP wsImage组件添加水印的实用代码
- Android2.3实现Android4.0风格EditText的方法
- dhtml shtml xhtml的区别解析
- Js动态设置rem来实现移动端字体的自适应代码
- sqlserver 数据库连接字符串中的可选项收集
- JavaScript中数据结构与算法(一):栈
- Ubuntu 安装 JDK8 的两种方法(总结)
- include包含头文件的语句中,双引号和尖括号的区别(详解)
- php单元测试phpunit入门实例教程
- 浅谈java项目与javaweb项目导入jar包的区别
- 使用C语言编写钢琴小程序
- D3.js实现简洁实用的动态仪表盘的示例