依赖于jQuery
演示：http://sandbox.runjs.cn/show/fpfjo3gu
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>地址控件</title> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/base.css"> <link rel="stylesheet" type="text/css" href="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/areaSelect.css"> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/jquery.js"></script> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/294/c4c2o6mh/areaSelect.js"></script> </head> <body> <!-- input与div的id需要在js中配置，data-action（自定义属性）是索引号，从0开始 --> <!-- 在areaSelect.js中添加“#consignoraddress”与"#consigneeAddr" $txtId = ["#startAreaId", "#endAreaId","#startFaId","#startShouId","#consignoraddress","#consigneeaddress"], areaID = ["#startArea", "#endArea","#startFa","#startShou","#consignoraAddr","#consigneeAddr"]; --> 起始地：<input id="consignoraddress" data-action="4" type="text"> <div id="consignoraAddr" class="area-tab"></div> <script> //初始化操作 ZXB.AreaQuery.areaSelects.init(); </script> </body> </html>