省市区联动三级下拉列表实现
生活随笔
收集整理的这篇文章主要介绍了
省市区联动三级下拉列表实现
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>搜索框输入文字自动提示</title><link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css"><style type="text/css">.container {padding-top: 150px;}</style>
</head><body><div class="container"><div class="form-inline"><div class="form-group"><select class="form-control" id="province"></select></div><div class="form-group"><select class="form-control" id="city"><option>请选择城市</option></select></div><div class="form-group"><select class="form-control" id="area"><option>请选择县城</option></select></div></div></div><script src="/js/ajax.js"></script><script src="/js/template-web.js"></script><!-- 省份模板 --><script type="text/html" id="provinceTpl"><option>请选择省份</option>{{each province}}<option value="{{$value.id}}">{{$value.name}}</option>{{/each}}</script><!-- 城市模板 --><script type="text/html" id="cityTpl"><option>请选择城市</option>{{each city}}<option value="{{$value.id}}">{{$value.name}}</option>{{/each}}</script><!-- 县城模板 --><script type="text/html" id="areaTpl"><option>请选择县城</option>{{each area}}<option value="{{$value.id}}">{{$value.name}}</option>{{/each}}</script><script>// 获取省市区下拉框元素var province = document.querySelector('#province')var city = document.querySelector('#city')var area = document.querySelector('#area')// 获取省份信息ajax({type: 'get',url: 'http://localhost:3000/province',success: function(data) {// 将服务器端返回的数据和html进行拼接var html = template('provinceTpl', {province: data});// 将拼接好的html字符串显示在页面中province.innerHTML = html;}});// 为省份的下拉框添加值改变事件province.onchange = function() {// 获取省份idvar pid = this.value;// 清空县城下拉框中的数据var html = template('areaTpl', {area: []});area.innerHTML = html;// 根据省份id获取城市信息ajax({type: 'get',url: '/cities',data: {id: pid},success: function(data) {var html = template('cityTpl', {city: data});city.innerHTML = html;}})};// 当用户选择城市的时候city.onchange = function() {// 获取城市idvar cid = this.value;// 根据城市id获取县城信息ajax({type: 'get',url: 'http://localhost:3000/areas',data: {id: cid},success: function(data) {var html = template('areaTpl', {area: data});area.innerHTML = html;}})}</script>
</body></html>
ajax.js
function ajax (options) {// 默认值var defaults = {type: 'get',url: '',async: true,data: {},header: {'Content-Type': 'application/x-www-form-urlencoded'},success: function () {},error: function () {}}// 使用用户传递的参数替换默认值参数Object.assign(defaults, options);// 创建ajax对象var xhr = new XMLHttpRequest();// 参数拼接变量var params = '';// 循环参数for (var attr in defaults.data) {// 参数拼接params += attr + '=' + defaults.data[attr] + '&';// 去掉参数中最后一个¶ms = params.substr(0, params.length-1)}// 如果请求方式为getif (defaults.type == 'get') {// 将参数拼接在url地址的后面defaults.url += '?' + params;}// 配置ajax请求xhr.open(defaults.type, defaults.url, defaults.async);// 如果请求方式为postif (defaults.type == 'post') {// 设置请求头xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);// 如果想服务器端传递的参数类型为jsonif (defaults.header['Content-Type'] == 'application/json') {// 将json对象转换为json字符串xhr.send(JSON.stringify(defaults.data))}else {// 发送请求xhr.send(params);}} else {xhr.send();}// 请求加载完成xhr.onload = function () {// 获取服务器端返回数据的类型var contentType = xhr.getResponseHeader('content-type');// 获取服务器端返回的响应数据var responseText = xhr.responseText;// 如果服务器端返回的数据是json数据类型if (contentType.includes('application/json')) {// 将json字符串转换为json对象responseText = JSON.parse(responseText);}// 如果请求成功if (xhr.status == 200) {// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数defaults.success(responseText, xhr);} else {// 调用失败回调函数并且将xhr对象传递给回调函数defaults.error(responseText, xhr);} }// 当网络中断时xhr.onerror = function () {// 调用失败回调函数并且将xhr对象传递给回调函数defaults.error(xhr);} }总结
以上是生活随笔为你收集整理的省市区联动三级下拉列表实现的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： 搜索框内容自动提示bootstrap
- 下一篇： 记录webpack使用问题，使用报错“U