省市区联动三级下拉列表实现
生活随笔
收集整理的這篇文章主要介紹了
省市区联动三级下拉列表实现
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<!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