Ajax来实现下拉框省市区三级联动效果（服务端基于express）
//服务端JS代码：
//提供服务端的处理
const express = require('express');
const fs = require('fs');
const app = express(); //载入选择城市的页面
app.get('/',function(req,res){
res.sendFile( __dirname + "/7.city.html" );
}); //获取所有的省份
app.get('/province',function(req,res){
//读取json文件
fs.readFile('cityData.min.json','utf8',function(err,data){
if (err) throw err;
//data就是我们的整个json字符串,需要转成对象
//console.log(data);
//console.log(typeof data);
var cityObj = JSON.parse(data);
var province = [];
cityObj.forEach(function(item){
province.push(item.n);
});
//console.log(province);
res.json(province);
});
}); //获取指定省份的市区
app.get('/city',function(req,res){
//获取传递过来的省份
var province = req.query.province;
fs.readFile('cityData.min.json','utf8',function(err,data){
if (err) throw err;
var cityObj = JSON.parse(data);
//如何找到对应省份下面的市区呢？
var city = [];
cityObj.forEach(function(item){
if (item.n == province) {
//对item.s进行遍历，针对每个对象，取出其属性为n的那个值
item.s.forEach(function(item1){
city.push(item1.n);
});
}
});
//console.log(city);
res.json(city);
});
}); //获取指定市区下面的所有区县
app.get('/country',function(req,res){
var city = req.query.city;
fs.readFile('cityData.min.json','utf8',function(err,data){
if (err) throw err;
var cityObj = JSON.parse(data);
//如何找到对应省份下面的市区呢？
var country = [];
//难点在于如何找到对应的区县呢
cityObj.forEach(function(item){
//item就是每一个省份对象，需要对该对象的s属性【它是一个数组】，进行遍历
item.s.forEach(function(item1){
//item1是 一个二级的市区对象，需要对该对象的n属性，进行比较
if (item1.n == city) {
if(item1.s==null){
country=[];
}else{
//此时，该对象的s属性中保存的这些对象的n属性就是我们要的结果,需要对s属性进行遍历
item1.s.forEach(function(item2){
//item2就是三级的区县对象，只需要获取n属性即可
country.push(item2.n);
});
} }
});
});
console.log(country);
res.json(country);
}); });
app.listen(2015,function(){
console.log('http server is listening localhsot in port 2015...');
});
<!--客户端页面代码-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>省市区三级联动</h2>
<label for="">按省份选择：</label>
<select name="" id="province">
<option value="">--省份--</option>
</select>
<select name="" id="city">
<option value="">--市--</option>
</select>
<select name="" id="country">
<option value="">--区县--</option>
</select>
<script>
//使用ajax获取所有的省份
//第一步，创建xhr对象
var xhr = new XMLHttpRequest();
//第二步，需要建立和服务器的连接
xhr.open('get','/province');
//第三步，监听状态的变化
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
//可以接受返回数据
var res = JSON.parse(xhr.responseText);
//待定，稍后继续
var str = " <option value=''>--省份--</option>";
res.forEach(function(item){
str += "<option value='"+item+"'>"+item+"</option>";
});
//将str添加到select为province的下拉列表中
document.getElementById('province').innerHTML = str;
}
}
//第四步，发送数据
xhr.send(null); //当触发省份的下拉框时，需要发送ajax请求，获取对应的市区
var province = document.getElementById('province');
province.onchange = function(){
//发起请求
xhr.open('get','/city?province='+this.value);
//监听状态的变化
xhr.onreadystatechange = function(){
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse( xhr.responseText);
var str = "<option value=''>--市--</option>";
res.forEach(function(item){
str += "<option value='"+item+"'>"+item+"</option>";
});
document.getElementById('city').innerHTML = str;
}
}
//发送请求
xhr.send(null);
} //获取指定市区下面的区县
var city = document.getElementById('city');
city.onchange = function(){
//发起请求
xhr.open('get','/country?city='+this.value);
//监听状态的变化
xhr.onreadystatechange = function
(){
if (xhr.readyState == 4 && xhr.status == 200) {
var res = JSON.parse( xhr.responseText);
var str = "<option value=''>--区县--</option>";
res.forEach(function(item){
str += "<option value='"+item+"'>"+item+"</option>";
});
document.getElementById('country').innerHTML = str;
}
}
//发送请求
xhr.send(null);
}
</script>
</body>
</html>
效果图：
Ajax来实现下拉框省市区三级联动效果（服务端基于express）的更多相关文章
- jQuery自定义漂亮的下拉框插件8种效果演示
原始的下拉框不好看这里推荐一个jQuery自定义漂亮的下拉框插件8种效果演示 在线预览 下载地址 实例代码 <!DOCTYPE html> <html lang="en&q ...
- jQuery下拉框插件8种效果
jQuery自定义漂亮的下拉框插件8种效果 jquery美化选择器实例有:边框.下划线. 伸缩 .滑动. 覆盖. 旋转. 弹出层选择 .环形效果. 在线预览 <body class=" ...
- js下拉框二级关联菜单效果代码具体实现
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
- ThinkPHP中ajax绑定select下拉框无法显示
html代码: 控制器代码: 其中的<option value="{$vo.gradeId}">{$one.gradeName}</option> 在操作过 ...
- Combobox下拉框两级联动
下拉框的两级联动是我们开发中经常遇到一种情况.比如一个学生管理系统中,根据年级.科目及姓名查询学生考试成绩,年级和科目都是硬盘中的有限数据(数据库)而学生则可以有用户手动指定,这时在数据库中有年级和科 ...
- css之实现下拉框自上而下展开动画效果&&自下而上收起动画效果
HTML代码: <div className={CX('font-size-selector-sub-list', { show: shouldSubListShow === true, hid ...
- 用Vue2仿京东省市区三级联动效果
三级联动,随着越来越多的审美,出现了很多种,好多公司都仿着淘宝的三级联动 ,好看时尚,so我们公司也一样……为了贴代码方便,我把写在data里面省市区的json独立了出来,下载贴进去即可用,链接如下 ...
- jQuery Ajax实现下拉框无刷新联动
HTML代码: @{ Layout = null; } @using DAL; @using System.Data; @{ AreaDal areaDal = new AreaDal(); stri ...
- （webapp）微信和safri 对于html5 部分功能不兼容，多选或单选下拉框去除边框无效果。
1 appearance:none; 2 -moz-appearance:none; /* Firefox */ 3 -webkit-appearance:none; /* Safari 和 Chro ...
随机推荐
- 启动eclipse时出现“Failed to load the JNI shared library jvm.dll”错误及解决
昨晚安装另一个版本的eclipse,启动时出现了"Failed to load the JNI shared library jvm.dll"错误: 1.刚开始以为是因为当时没有将 ...
- vuex在项目中使用的一点总结
以下为vue后台管理项目中使用vuex的一点总结,截取了其中部分代码,如有什么错误,还望指出. 1. token 存储 登陆成功之后,需要把获取到的 token 存储到 vuex 中,配合 axios ...
- ssl双向认证
ssl双向认证 一.背景知识 1.名词解释 ca.key: 根证书的私钥 , ca.crt: 根证书的签名证书 server.key, server.crt client.key, client.cr ...
- restful架构风格设计准则（五）用户认证和session管理
读书笔记,原文链接:http://www.cnblogs.com/loveis715/p/4669091.html,感谢作者! Authentication REST提倡无状态约束,这就要求:用户状态 ...
- cmd编译运行java
新建.java结尾的文件 内容 public class hello{ public static void main(String[] args){ System.out.println(" ...
- setInterval()使用时易疏忽的点
举个例子: 一道题目 这两个程序的区别就在于我向setInterval的参数一function写入了参数.这就是导致运行结果不尽如人意的原因. setInterval()方法可以接收三个参数,此参数会 ...
- Struts(十三)：通用标签
Struts标签简介: Struts2标签库提供了主题.模板支持,极大地简化了视图页面的编写,而且,struts2的主题.模板都提供了很好的扩展性,实现了更好的代码复用.Struts2允许在页面中使用 ...
- Apache Spark Jobs 性能调优
当你开始编写 Apache Spark 代码或者浏览公开的 API 的时候,你会遇到各种各样术语,比如transformation,action,RDD(resilient distributed d ...
- C++ 多态的实现及原理
C++的多态性用一句话概括就是:在基类的函数前加上virtual关键字,在派生类中重写该函数,运行时将会根据对象的实际类型来调用相应的函数.如果对象类型是派生类,就调用派生类的函数:如果对象类型是基类 ...
- java面试3-对于java中值传递的理解(Hollis)
这是根据Hollis的直面java内容习得(有兴趣的可以加他微信公众号) 对于初学者来说,要理解java中的值传递很难理解,为什么说java只有值传递?那引用传递呢? java中的错误理解: 错误理解 ...