js省市二级联动
2016-12-23 13:58
323 查看
html:
city.js:
<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函数-硬性保留小数位后位数(不四舍五入)不够位数以0补齐
- JSTL整理总结
- JSP整理总结--9大内置对象、4个作用域
- JSP整理总结--JSP指令、动作标签
- Javascript闭包——懂不懂由你,反正我是懂了
- JSX使用总结
- 最简单的jsp+servlet的增删改查代码
- cookie.js
- js 点击弹窗慢慢消失
- move.js
- javascript的贪吃蛇游戏
- js返回两个数之间的随机数
- 理解JavaScript事件以及事件处理程序——笔记整理
- js取url参数
- EntityFramework中JSON序列化循环引用----JavaScriptSerializer
- js刷新页面
- 通过JSON.stringify输出格式化的JSON字符串
- JSP入门学习指南
- JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
- js 获取url地址的get参数