利用input与ul列表结合实现自定义三级联动
<div class="select"> <input id="province" name="Province" placeholder="请选择省" readonly> <div class="list"> <ul id="c1"></ul> </div> </div> <div class="select"> <input id="city" name="City" placeholder="请选择市" readonly> <div class="list"> <ul id="c2"></ul> </div> </div> <div class="select"> <input id="area" name="Area" placeholder="请选择区" readonly> <div class="list"> <ul id="c3"></ul> </div> </div>
<script src="address.js"> </script>//引入的省市区文件(可到资源下载) <script type="text/javascript"> var $li1=''; var $li2=''; var $li3=''; var city; var area; $.each(provinceList,function (i,val) { $li1+="<li obj='"+i+"'>"+val.name+"</li>"; }); $("#c1").append($($li1)); $("#province").click(function(){ $("#c1").show(); $("#c2").hide(); $("#c3").hide(); }); $("#city").click(function () { $("#c2").show(); $("#c1").hide(); $("#c3").hide(); }); $("#area").click(function () { $("#c3").show(); // $("#c1").hide(); // $("#c2").hide(); }); $("#c1").on("click","li",function(){ var i=$(this).attr("obj"); city= provinceList[i].cityList; //取得值 // alert(city[0].name); var text=$(this).text(); $("#province").val(text); $("#c1").hide(); $("#c2").empty(); $li2=""; //添加节点 $.each(city,function (i,val) { $li2+="<li obj='"+i+"'>"+val.name+"</li>"; }); $("#c2").append($($li2)); $("#c2").show() }); $("#c2").on("click","li",function(){ var i=$(this).attr("obj"); area=city[i].areaList; var text=$(this).text(); $("#city").val(text); $("#c2").hide(); $("#c3").empty(); $li3=""; $.each(area,function(i,val){ $li3+="<li>"+val+"</li>" }); $("#c3").append($($li3)); $("#c3").show() }); $("#c3").on("click","li",function(){ var text=$(this).text(); $("#area").val(text); $("#c3").hide(); }); </script>
<style> .select{ display: inline-block; position: relative; } input{ height:30px; border-radius: 3px; border: solid 1px #000; -moz-appearance: none; text-align: center; cursor:pointer; } .list{ position: absolute; top:35px; } #province{ width:150px; } #city{ width:150px; } #area{ width:150px; } textarea{ margin-top: 20px; box-sizing: border-box; width:600px; resize: none; padding: 10px; } ul{ margin: 0; padding: 0; list-style: none; max-height:200px; overflow: auto; cursor:pointer; background: white; display: none; border:1px solid #e6e6e8; } #c1{ width:150px; text-align:center; } #c1 li{ margin:5px auto; } #c2{ width:150px; text-align:center; } #c2 li{ margin:5px auto; } #c3{ width:150px; text-align:center; } #c3 li{ margin:5px auto; } </style>
//省市区文件可留言私传