html:

<script src="js/city.js"></script>
......
<body>
<div class="padding border-bottom">
<ul class="search">
<li>
<select style="height:31px;border-radius: 3px;border: solid 1px #ddd;" id="province">
</select>
</li>
<li id="city">
</li>
<li> <a class="button border-main icon-plus-square-o" href="javascript:void(0)" onclick="goaddcity()"> 添加</a> </li>
</ul>
</div>
</body>

city.js:

$(function(){
//加载所有省市
$("#province").html("");
$("#city").html("");
$.ajax({
url: "js/city.json",
type: "get",
dataType: 'json',
contentType: "application/json;charset=utf-8",
success:function(data){
if (data.success == true) {
//i表示在data中的索引位置,n表示包含的信息的对象
//省
var province0 = '<option>----请选择省份----</option> ';
$('#province').append(province0);
//市
var city0 =
'<select style="height:31px;border-radius: 3px;border: solid 1px #ddd;" class="city">'+
' <option>----请选择城市----</option> '+
'</select> '
;
$("#city").append(city0);
$.each(data.data,function(i,n){
var name = n.name;
var province = '<option>'+name+'</option>';
$('#province').append(province);
if (n.regionCityList != null) {
var str = '<select style="height:31px;border-radius: 3px;border: solid 1px #ddd;" class="city">';
var cityarr = n.regionCityList;
for (var i=0;i<cityarr.length;i++){
str += '<option value="'+cityarr[i].code+'">'+cityarr[i].name+'</option>';
}
str += '</select>';
$('#city').append(str);
} }); $(document).ready(function(){
$("#province").change(function(){
$("#province option").each(function(i,o){
if($(this).attr("selected")){
$(".city").hide();
$(".city").eq(i).show();
currentShowCity=i;
}
});
});
$("#province").change();
}); } },
error:function() {
alert("error");
}
}); });
city.json(注意:city.json和city.js要在同一目录下,并且目录文件夹是js)
city.json下载地址: http://files.cnblogs.com/files/007sx/city.zip

js省市二级联动的更多相关文章

  1. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  2. js 省市二级联动

    <html> <head> <meta charset="UTF-8"> <title></title> </he ...

  3. 省市二级联动--使用app-jquery-cityselect.js插件

    只有省市二级联动,三级联动还没处理好,会尽快完善. 嵌入id: <div class="form-group"> <label>地址</label&g ...

  4. 省市二级联动(原生JS)

    代码如下: <html> <head> <meta charset="UTF-8"> <title>省市二级联动</title ...

  5. 微信小程序picker组件 - 省市二级联动

    picker 从底部弹起的滚动选择器,现支持五种选择器,通过mode来区分,分别是普通选择器,多列选择器,时间选择器,日期选择器,省市区选择器,默认是普通选择器. picker官方文档链接 由于项目需 ...

  6. jQuery_完成省市二级联动

    当填表的时候会让你设计某省某市怎么设计,应该明白,如果你选择了一个确定的省,那么在第二个下拉框内则不会有除了你选择的省的市之外的名称.而这功能用js来实现很麻烦,但是用jq确很容易实现. 原表结构: ...

  7. JavaScript 实现省市二级联动

    JavaScript 实现省市二级联动 版权声明:未经授权,严禁转载! 案例代码 <style> .hide { display: none; } </style> <s ...

  8. JS制作二级联动

    JS制作二级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  9. js:二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

随机推荐

  1. HTML5游戏实战之精灵翻转

    要实现精灵的翻转.很easy.先看实际效果点这里. 代码仅仅有区区几行: var sp = this.getWindow().find("ui-status2-general"); ...

  2. Java生成二维码QRCode.jar

    所需jar包:QRCode.jar:http://download.csdn.net/detail/xuxu198899223/7717745 package ewm; import java.awt ...

  3. activiti自己定义流程之Spring整合activiti-modeler实例(一):环境搭建

    项目中须要整合activiti-modeler自己定义流程,找了非常多资料后,最终成功的跳转到activiti-modeler流程设计界面.下面是记录: 一.整合基础:eclipse4.4.1.tom ...

  4. 【Android】19.1 SharedPreferences类

    分类:C#.Android.VS2015: 创建日期:2016-03-05 一.简介 SharedPreferences:简单共享存储首选项.实际上就是用加密的内部文件保存所有页面都能访问的一系列“n ...

  5. mysqldump 导出数据库为DBname的表名为Tname的表结构 导出数据库的所有表的表结构

    mysqldump -uroot -p password -d DBname Tname >db.sql #关建点是"-d"参数 导出数据库的所有表的表结构 mysqldum ...

  6. 旋转加载loading和点点加载loadingdemo

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. JSON数据乱码问题

    http://ifeve.com/json-code-problem/ ***************************** 背景 程序员一提到编码应该都不陌生,像gbk.utf-8.ascii ...

  8. SQL Server FOR XML PATH 语句的应用---列转行

    经常在论坛看到高手使用了 for xml path,由于是搜索一下,记录了详细的使用方法.在SQL Server中利用 FOR XML PATH 语句能够把查询的数据生成XML数据,下面是它的一些应用 ...

  9. 使用filter导致服务器返回的页面始终是空白---在doFilter中漏写了chain.doFilter()

    今天调代码的时候,突然发现,服务器开着,什么都没有问题,当我把下面这个filter给deploy了以后,访问所有的页面就都是空白. 后来发现,是因为在代码路径中,有一条路径没有调用filterChai ...

  10. 解决Ubuntu16的风扇高速旋转问题(双显卡)

    问题描述 自从我的双显卡的笔记本装上Ubuntu 14 后,风扇狂转.发热巨大.网上一搜索估计是显卡驱动不太行.最近英伟达的Nvidia Prime可以完美地切换双显卡,安装这个软件后,风扇就不会狂转 ...