js实现省市区三级联动非select下拉框版

实现省市区三级联动的非select下拉框版，可以利用js和html来实现。

首先，我们可以在html中创建三个空的div元素，分别代表省、市、区的容器。然后，利用js动态创建并添加相应的下拉框元素到对应的div中。

在js中，我们可以先定义一个包含省市区信息的json数据。然后，利用事件监听的方式，当省下拉框发生改变时，动态生成市的下拉框并添加到相应的div中；同理，当市下拉框发生改变时，动态生成区的下拉框并添加到相应的div中。

除此之外，我们还可以利用ajax来从后台获取省市区的数据，实现动态的省市区三级联动。当页面加载时，先通过ajax请求获取省的数据，然后利用js动态生成省的下拉框并添加到对应的div中；当选择省时，再通过ajax请求获取对应的市数据，再动态生成市的下拉框；当选择市时，再通过ajax请求获取对应的区数据，并动态生成区的下拉框。

通过以上的方式，我们就可以实现一个非select下拉框版的省市区三级联动。这样的实现方式不仅可以提升用户体验，还可以减少页面的加载开销和提高页面的响应速度。

相关问题

利用ajax和json实现省市区三级联动

实现省市区三级联动需要先准备好三个下拉框，分别用于显示省、市、区的选项。然后，通过 AJAX 和 JSON 技术，当用户选择省份时，向后台请求该省份下的所有城市信息，并将这些城市信息填充到“市”下拉框中。当用户选择市区时，再次向后台请求该城市下的所有区县信息，并将这些区县信息填充到“区”下拉框中。

以下是一种简单的实现方式：

HTML 代码：

<select id="province">
  <option value="">请选择省份</option>
</select>

<select id="city">
  <option value="">请选择城市</option>
</select>

<select id="district">
  <option value="">请选择区县</option>
</select>

JavaScript 代码：

// 加载省份信息
function loadProvince() {
  $.getJSON('province.json', function(data) {
    var province = $('#province');
    province.empty().append('<option value="">请选择省份</option>');
    $.each(data, function(i, item) {
      province.append('<option value="' + item.code + '">' + item.name + '</option>');
    });
  });
}

// 加载城市信息
function loadCity(provinceCode) {
  $.getJSON('city.json', {provinceCode: provinceCode}, function(data) {
    var city = $('#city');
    city.empty().append('<option value="">请选择城市</option>');
    $.each(data, function(i, item) {
      city.append('<option value="' + item.code + '">' + item.name + '</option>');
    });
  });
}

// 加载区县信息
function loadDistrict(cityCode) {
  $.getJSON('district.json', {cityCode: cityCode}, function(data) {
    var district = $('#district');
    district.empty().append('<option value="">请选择区县</option>');
    $.each(data, function(i, item) {
      district.append('<option value="' + item.code + '">' + item.name + '</option>');
    });
  });
}

// 当省份选项改变时，加载该省份下的城市信息
$('#province').change(function() {
  var provinceCode = $(this).val();
  if (provinceCode) {
    loadCity(provinceCode);
  }
});

// 当城市选项改变时，加载该城市下的区县信息
$('#city').change(function() {
  var cityCode = $(this).val();
  if (cityCode) {
    loadDistrict(cityCode);
  }
});

// 页面加载时，加载省份信息
$(function() {
  loadProvince();
});

省份、城市、区县数据保存在三个 JSON 文件中，文件格式如下：

province.json：

[
  {"code": "110000", "name": "北京市"},
  {"code": "120000", "name": "天津市"},
  {"code": "130000", "name": "河北省"},
  {"code": "140000", "name": "山西省"},
  {"code": "150000", "name": "内蒙古自治区"},
  {"code": "210000", "name": "辽宁省"},
  {"code": "220000", "name": "吉林省"},
  {"code": "230000", "name": "黑龙江省"},
  {"code": "310000", "name": "上海市"},
  {"code": "320000", "name": "江苏省"},
  {"code": "330000", "name": "浙江省"},
  {"code": "340000", "name": "安徽省"},
  {"code": "350000", "name": "福建省"},
  {"code": "360000", "name": "江西省"},
  {"code": "370000", "name": "山东省"},
  {"code": "410000", "name": "河南省"},
  {"code": "420000", "name": "湖北省"},
  {"code": "430000", "name": "湖南省"},
  {"code": "440000", "name": "广东省"},
  {"code": "450000", "name": "广西壮族自治区"},
  {"code": "460000", "name": "海南省"},
  {"code": "500000", "name": "重庆市"},
  {"code": "510000", "name": "四川省"},
  {"code": "520000", "name": "贵州省"},
  {"code": "530000", "name": "云南省"},
  {"code": "540000", "name": "西藏自治区"},
  {"code": "610000", "name": "陕西省"},
  {"code": "620000", "name": "甘肃省"},
  {"code": "630000", "name": "青海省"},
  {"code": "640000", "name": "宁夏回族自治区"},
  {"code": "650000", "name": "新疆维吾尔自治区"}
]

city.json：

{
  "130000": [
    {"code": "130100", "name": "石家庄市"},
    {"code": "130200", "name": "唐山市"},
    {"code": "130300", "name": "秦皇岛市"},
    {"code": "130400", "name": "邯郸市"},
    {"code": "130500", "name": "邢台市"},
    {"code": "130600", "name": "保定市"},
    {"code": "130700", "name": "张家口市"},
    {"code": "130800", "name": "承德市"},
    {"code": "130900", "name": "沧州市"},
    {"code": "131000", "name": "廊坊市"},
    {"code": "131100", "name": "衡水市"}
  ],
  "320000": [
    {"code": "320100", "name": "南京市"},
    {"code": "320200", "name": "无锡市"},
    {"code": "320300", "name": "徐州市"},
    {"code": "320400", "name": "常州市"},
    {"code": "320500", "name": "苏州市"},
    {"code": "320600", "name": "南通市"},
    {"code": "320700", "name": "连云港市"},
    {"code": "320800", "name": "淮安市"},
    {"code": "320900", "name": "盐城市"},
    {"code": "321000", "name": "扬州市"},
    {"code": "321100", "name": "镇江市"},
    {"code": "321200", "name": "泰州市"},
    {"code": "321300", "name": "宿迁市"}
  ],
  ...
}

district.json：

{
  "130100": [
    {"code": "130102", "name": "长安区"},
    {"code": "130103", "name": "桥东区"},
    {"code": "130104", "name": "桥西区"},
    {"code": "130105", "name": "新华区"},
    {"code": "130107", "name": "井陉矿区"},
    {"code": "130108", "name": "裕华区"},
    {"code": "130121", "name": "井陉县"},
    {"code": "130123", "name": "正定县"},
    {"code": "130124", "name": "栾城县"},
    {"code": "130125", "name": "行唐县"},
    {"code": "130126", "name": "灵寿县"},
    {"code": "130127", "name": "高邑县"},
    {"code": "130128", "name": "深泽县"},
    {"code": "130129", "name": "赞皇县"},
    {"code": "130130", "name": "无极县"},
    {"code": "130131", "name": "平山县"},
    {"code": "130132", "name": "元氏县"},
    {"code": "130133", "name": "赵县"},
    {"code": "130181", "name": "辛集市"},
    {"code": "130182", "name": "藁城市"},
    {"code": "130183", "name": "晋州市"},
    {"code": "130184", "name": "新乐市"},
    {"code": "130185", "name": "鹿泉市"}
  ],
  "320100": [
    {"code": "320102", "name": "玄武区"},
    {"code": "320104", "name": "秦淮区"},
    {"code": "320105", "name": "建邺区"},
    {"code": "320106", "name": "鼓楼区"},
    {"code": "320111", "name": "浦口区"},
    {"code": "320113", "name": "栖霞区"},
    {"code": "320114", "name": "雨花台区"},
    {"code": "320115", "name": "江宁区"},
    {"code": "320116", "name": "六合区"},
    {"code": "320117", "name": "溧水区"},
    {"code": "320118", "name": "高淳区"}
  ],
  ...
}

其中，省份和城市数据的 JSON 文件中，每个省份和城市对应一个唯一的“code”，用于后续请求该省份或城市下的区县数据。而区县数据的 JSON 文件中，每个区县对应一个唯一的“code”，用于提交表单数据时使用。

layui省市区三级联动的实现

要实现layui省市区三级联动，你可以按照以下步骤进行操作：

1. 在HTML中创建三个下拉框元素，分别对应省、市和区的选择。
2. 引入layui的相关样式和脚本。
3. 使用layui的form模块初始化表单，并监听下拉框的变化事件。
4. 当省下拉框的值改变时，触发change事件，在事件处理程序中发送异步请求获取对应的市数据，并动态更新市下拉框的选项。
5. 当市下拉框的值改变时，同样触发change事件，在事件处理程序中发送异步请求获取对应的区数据，并动态更新区下拉框的选项。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css">
</head>
<body>
    <div class="layui-form">
        <div class="layui-form-item">
            <div class="layui-input-inline">
                <select name="province" id="province">
                    <option value="">请选择省份</option>
                    <!--省份选项-->
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="city" id="city">
                    <option value="">请选择城市</option>
                    <!--城市选项-->
                </select>
            </div>
            <div class="layui-input-inline">
                <select name="area" id="area">
                    <option value="">请选择地区</option>
                    <!--地区选项-->
                </select>
            </div>
        </div>
    </div>

    <script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>
    <script>
        layui.use(['form'], function() {
            var form = layui.form;

            // 省下拉框值改变事件
            form.on('select(province)', function(data) {
                var provinceId = data.value;

                // 发送异步请求获取对应的市数据
                // 根据省份ID获取对应的市数据并动态更新市下拉框选项

                // 清空区下拉框选项
                $("#area").html('<option value="">请选择地区</option>');
                form.render('select');
            });

            // 市下拉框值改变事件
            form.on('select(city)', function(data) {
                var cityId = data.value;

                // 发送异步请求获取对应的区数据
                // 根据城市ID获取对应的区数据并动态更新区下拉框选项

                form.render('select');
            });

            // 初始化省、市、区的下拉框选项
            // 可以通过异步请求获取省、市、区数据并动态添加选项
        });
    </script>
</body>
</html>

这是一个简单的示例代码，你需要根据你的实际需求进行修改和完善。