基于bootstrap三联动

身为一个后台数据交互,非得搞三联动,搞了几天也是搞的满头冒星星,不过最后还是攻克难关搞定了,记录一下,以免下次再用时忘记.

前端代码:

css

<style type="text/css">
* { -ms-word-wrap: break-word; word-wrap: break-word; }
html { -webkit-text-size-adjust: none; text-size-adjust: none; }
html, body {height:99%;width:99%; }
.wrap{width:464px;height:34px;margin:20px auto;border:0;position:relative;}
.input{position:absolute;top:0;left:0;width:457px;margin:0;padding-left:5px;height:30px;line-height:30px;font-size:12px;border:1px solid #c9cacb;}
s{position:absolute;top:1px;right:0;width:32px;height:32px;background:url("img/arrow.png") no-repeat;}
._citys { width: 450px; display: inline-block; border: 2px solid #eee; padding: 5px; position: relative; }
._citys span { color: #05920a; height: 15px; width: 15px; line-height: 15px; text-align: center; border-radius: 3px; position: absolute; right: 10px; top: 10px; border: 1px solid #05920a; cursor: pointer; }
._citys0 { width: 95%; height: 34px; line-height: 34px; display: inline-block; border-bottom: 2px solid #05920a; padding: 0px 5px; font-size:14px; font-weight:bold; margin-left:6px; }
._citys0 li { display: inline-block; line-height: 34px; font-size: 15px; color: #888; width: 80px; text-align: center; cursor: pointer; }
._citys1 { width: 100%; display: inline-block; padding: 10px 0; }
._citys1 a { width: 83px; height: 35px; display: inline-block; background-color: #f5f5f5; color: #666; margin-left: 6px; margin-top: 3px; line-height: 35px; text-align: center; cursor: pointer; font-size: 12px; border-radius: 5px; overflow: hidden; }
._citys1 a:hover { color: #fff; background-color: #05920a; }
.AreaS { background-color: #05920a !important; color: #fff !important; }
</style>

html

<div class="wrap">

    <input class="input" name="" id="city" type="text" placeholder="请选择" autocomplete="off" readonly="true">

    <s></s>

</div>

js

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/Popt.js"></script>
<script type="text/javascript" src="js/city.json.js"></script>
<script type="text/javascript" src="js/citySet.js"></script>

<script type="text/javascript">
$("#city").click(function (e) {

    var province;
    //ajax请求接口数据
    $("#city").click(function (e) {
        //ajax请求地区数据
        var xhr = createXhr();
        xhr.onreadystatechange = function () {
            if(xhr.readyState == 4 && xhr.status == 200) {
                //获取返回结果
                province = JSON.parse(xhr.responseText);
            }
        }
        var url = "接口地址";
        xhr.open('get',url,false);
        xhr.send(null);

	SelCity(this,e);
});
$("s").click(function (e) {
	SelCity(document.getElementById("city"),e);
});
</script>

js文件包下载地址: https://pan.baidu.com/s/15ivq-_an-VxmCnUroBQMsw 提取码: mg1o