通过本地数据的查询可以减少与服务器交互的次数，提高效率，使得交互更优
这里是用市县级为例的，主要的思想就是需要需要交互的数据不是通过后台查询数据库进行交互，而是通过本地的数据与用户进行交互，当用户选择完县级的时候，会将县级的ID号添加到URL上，而对于带有cityID的URL会进行一定的处理，根据ID查找对应的县和市并且显示在界面上，这种情况之下，就算用户重新刷新了，也会呈现之前的选择（此处与向后台请求相比，效率也高），当然不是所有的数据都适合，应该区别对待
index.html
这里没有用select，而是采用了一个ul，主要想法是市县的选择都可以通过这个ul完成
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./style.css"> </head> <body> <div class="wrapper"> <ul id="cityChoose"> </ul> <div class="c-choose" id="cityClick" name="s_city">市</div> <div class="c-choose" id="countryClick" name="s_country">县</div> </div> <script type="text/javascript" src="./area.js"></script> <script type="text/javascript" src="./index.js"></script> </body> </html>city.js（可以忽略我在里面添加的相关市县信息的具体情况），封装的方法是学jQuery的
(function(global) { function Area() { this.items = {}; //保存本地的数据 this.init(); this.currentClick = 0; }; Area.prototype = { add : function(id, array) { //id array this.items[id] = array; }, exits : function(id) { if(typeof(this.items[id]) == 'undefined') { return false; } return true; }, change : function(v) { var _this = this; var str = "0"; var address = "file:///C:/Users/vamous/Desktop/2017-4-6/index.html?cityId="; //url for(var i = 0; i < v; i++) { str += ("_" + (_this.currentClick - 1)); //上一次点击的位置 } var ss = document.getElementById('cityChoose'); with(ss) { if(v && _this.currentClick > 0 || !v) { //取数据 if(_this.exits(str)) { //判断传入的参数是否存在 ar = _this.items[str]; //得到str为键对应的数组 ss.innerHTML = ""; if(str.indexOf('_') > 0) { //存在"_" for(var i = 0; i < ar.length; i++) { var liEle = document.createElement('li'); liEle.textContent = ar[i][0]; liEle.setAttribute('id', ar[i][1]); ss.appendChild(liEle); liEle.onclick = function() { document.getElementById('countryClick').innerHTML = this.innerText; console.log(this.innerText); window.location.href += address + this.getAttribute('id'); } } }else { for(var i = 0; i < ar.length; i++) { var liEle = document.createElement('li'); liEle.textContent = ar[i]; liEle.setAttribute('id', i); ss.appendChild(liEle); liEle.onclick = function() { _this.currentClick = parseInt(this.getAttribute('id')) + 1; //点击 _this.change(1); console.log(this.innerText); document.getElementById('cityClick').innerHTML = this.innerText; } } } } } } }, init : function() { this.add("0", ["咸阳市", "西安市"]); this.add("0_1", [["新城区", "2"], ["碑林区", "3"], ["莲湖区 ", "4"], ["雁塔区 ", "5"], ["未央区", "6"], ["灞桥区", "7"], ["长安区", "8"], ["阎良区", "9"], ["临潼区", "10"] , ["蓝田县", "11"], ["周至县", "12"], ["户县", "13"], ["高陵县", "14"]]); this.add("0_0", [["三原县", "15"], ["泾阳县", "16"], ["乾县", "17"], ["礼泉县", "18"], ["永寿县", "19"], ["彬县", "20"], ["长武县", "21"], ["旬邑县", "22"], ["淳化县", "23"] , ["武功县", "24"], ["兴平", "25"]]); } }; global.Area = Area; })(window);index.js
包含了通过URL的cityId查询并显示指定市县的方法
var area = new Area(); document.getElementById('cityClick').onclick = function() { area.change(); var cityChoose = document.getElementById('cityChoose'); cityChoose.className = cityChoose.className.replace("hide", ""); } var array = window.location.href.split("?"); if(array.length > 0) { var cityId = array[1] ? array[1].split("&") : ''; for(var i = 0; i < cityId.length; i++) { if(cityId[i].split("=")[0] == "cityId") { fancha(cityId[i].split("=")[1]); } } } function fancha(cityId) { var ar; var cityList = area.items[0]; for(var i = 0; i < 2; i++) { var indexStr = "0_" + i; if(area.exits(indexStr)) { ar = area.items[indexStr]; for(var a = 0; a < ar.length; a++) { if(ar[a][1] == cityId) { document.getElementById('countryClick').innerHTML = ar[a][0]; document.getElementById('cityClick').innerHTML = cityList[i]; return; } } } } }具体的代码请看这里：http://download.csdn.net/detail/dear_mr/9808320
