基於bootstrap三聯動
阿新 • • 發佈:2018-11-05
身為一個後臺資料互動,非得搞三聯動,搞了幾天也是搞的滿頭冒星星,不過最後還是攻克難關搞定了,記錄一下,以免下次再用時忘記.
前端程式碼:
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