网页Ajax教程

 

如何快速实现省份、城市、区县三级联动下拉

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>省市区三级下拉</title>
  <script src="js/jquery-3.2.1.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <script src="/js/city-data.js"></script>

</head>
<body>
  <form method="post" autocomplete="off">
    <div class="form-group">
      <label class="col-sm-2 control-label no-padding-right"> 请选择测试: </label>
      <div class="col-sm-2">
        <select class="form-control city-data" data-index=1 data-value="${bean.provinceId!0}" name="provinceId"></select>
      </div>
      <div class="col-sm-2">
        <select class="form-control city-data" data-index=2 data-value="${bean.cityId!0}" name="cityId"></select>
      </div>
      <div class="col-sm-2">
        <select class="form-control city-data" data-index=3 data-value="${bean.districtId!0}" name="districtId"></select>
      </div>
    </div>
    </form>
</body>
</html>


1、页面直接导入 /js/city-data.js 文件,下载后无需修改即可使用;


2、页面上放置 select


效果展示: 点击预览


Copyright © 杭州于芯科技有限公司

QQ交流群:479413914

微信小程序api接口

浙ICP备15041833号