<form action="#" name="myform">
<label>省</label><select name="provice" id="provice"><option value="-1">请输入省份</option></select>
<label>市</label><select name="city" id="city"><option value="-1">请输入城市</option></select>
<label>县</label><select name="locale" id="locale"><option value="-1">请输入区县</option></select>
</form>

2. 定义json数据源:

    var jsonData = [{
treeNode : '请输入省份',
value : -1,
childNode : [{
treeNode : '请输入城市',
value : -1,
childNode : [{
treeNode : '请输入区县',
value : -1,
childNode : []
}]
}]
},{
treeNode : '北京',
value : 1,
childNode : [{
treeNode : '东城区',
value : 11,
childNode : []
},{
treeNode : '西城区',
value : 12,
childNode : []
}]
},{
treeNode : '广西壮族自治区',
value : 2601,
childNode : [{
treeNode : '南宁',
value : 6653,
childNode : [{
treeNode : '横县',
value : 10799,
childNode : []
}, {
treeNode : '宾阳县',
value : 10800,
childNode : []
}]
}]
}]

3. javascript代码:

    function initCountry(){
var provice = $("#provice");
var city = $("#city");
var locale = $("#locale");
var proviceStr = "";
$.each(<span style="color:#FF0000;">jsonData</span>,function(index,items){
proviceStr += "<option value='"+jsonData[index].value+"'>"+jsonData[index].treeNode+"</option>";
});
provice.empty().append(proviceStr);
provice.bind("change",function(){
if($(this).find(":selected").attr("value") == -1){
city.empty().append("<option value='-1'>请输入区县</option>");
}
});
provice.bind("change",function(){
var cityStr = '';
var index = provice.find(":selected").index();
$.each(jsonData[index].childNode,function(index,items){
city.empty();
cityStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";
city.append(cityStr);
})
changeLocale();
});
city.bind("change",changeLocale);
function changeLocale(){
var localeStr = '';
var index = provice.find(":selected").index();
var index2 = city.find(":selected").index();
$.each(jsonData[index].childNode[index2].childNode,function(index,items){
locale.empty();
localeStr += "<option value='"+items.value+"'>"+items.treeNode+"</option>";
locale.append(localeStr);
})
if(localeStr == ''){
locale.empty();
locale.append("<option value='-11'>请输入区县</option>");
}
}
}
$(function(){
initCountry(); })

用jquery写的json省市县三级联动下拉的更多相关文章

  1. 项目总结01:JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  2. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  3. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  4. jquery+ligerform三级联动下拉框

    如下为ligerform里的三级联动下拉框: var formData=[ {display:,width:,space:,type:"select",group:"区域 ...

  5. 用jsp实现省市区三级联动下拉

    jsp+jquery实现省市区三级联动下拉 不少系统都需要实现省市区三级联动下拉,像人口信息管理.电子商务网站.会员管理等,都需要填写地址相关信息.而用ajax实现的无刷新省市区三级联动下拉则可以改善 ...

  6. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Android实现三级联动下拉框 下拉列表spinner

    Android实现(省.市.县)三级联动下拉框 下拉列表spinner 转载请注明出处: http://www.goteny.com/articles/2013/11/46.html http://w ...

  8. Web 1三级联动 下拉框 2添加修改删除 弹框

    Web  三级联动 下拉框 using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...

  9. JQ与AJAX 省市区三级联动下拉框

    用于初学者学习基本的联动下拉框,废话不多说,见代码 首先看控制器里的3个下拉框对应代码: public ActionResult GetProvinceList() { ProvinceReposit ...

随机推荐

  1. Nmap原理02 - 编写自己的服务探测脚本

    编写自己的服务探测脚本 1. 添加自己的探测脚本 nmap-service-probes文件的格式将在第二节介绍,本节通过一个例子说明如何添加自己的服务探测脚本. AMQP协议,即Advanced M ...

  2. document.write与document.getElementById.innterHTML的区别

    <html> <head> <meta charset="utf-8"> <script> var tmp = "< ...

  3. HDU 5635 ——LCP Array ——————【想法题】

    LCP Array Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Total ...

  4. JS预编译详解

    我们都知道javascript是解释型语言,执行的特点呢是编译一行,执行一行.按照这个思路有时候我们在运行代码时会有一些令人费解的现象出现.下面我们一起来执行下面三段代码. <script> ...

  5. java实现截取6个汉字字母数字

    项目中使用到需要截取6个字(12个字母或数字),解决方法如下: /** * * @方法名称:getWordCount * @内容摘要: <截取输入字符串 大于6个后显示...> * @pa ...

  6. 2、按钮:Buttons

    /* --- page1.html ---*/ <ion-content padding class="page1"> <h1>基本用法,实体框</h ...

  7. 查看和设置Oracle数据库字符集

    数据库服务器字符集select * from nls_database_parameters,其来源于props$,是表示数据库的字符集. 客户端字符集环境select * from nls_inst ...

  8. Quartz使用及注意事项

    Quartz使用及注意事项 前提:目前由于公司业务决定,大量使用Quartz,每天固定的时间点执行相应的业务逻辑,,几十个时间点应该是有的,某一个时间点如果没有执行带来的问题是巨大的.Quartz的稳 ...

  9. c++ sizeof对象大小整理

    1. sizeof 是运算符,而不是函数. 2. 当sizeof 的对象是表达式时,求的大小是表达式返回值的类型大小,但并不计算表达式的值,比如: ; ; cout << sizeof(c ...

  10. Bootstrap组件介绍

    一.下拉菜单 用于显示链接列表的可切换.有上下文的菜单.下拉菜单的 JavaScript 插件让它具有了交互性. 1.实例 将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里,或者另一个声明了 ...