省市区三级联动

1、全国的省市区json数据（cityData.js）
2、在js文件中引入cityData.js（）

效果图

image.png

创建数据表

module.exports = (sequelize, DataTypes) => sequelize.define('address', {
    id: {
        type: DataTypes.INTEGER(11),
        allowNull: false,
        primaryKey: true,
        // autoIncrement : true,
    },
    names : {
        type : DataTypes.STRING,
        allowNull : false,
    },
    fid :{
        type: DataTypes.INTEGER(11),
        allowNull: false,
    }
})

添加数据和查询数据的方法

let model = require('../model');

let address = model.address;

//添加数据
async function add(obj, callback) {
    let temp = await address.create({
        id : obj.id,
        names: obj.names,
        fid: obj.fid,
    });

    var data;
    if (temp) {
        //成功
        data = {
            msg: 'success', 
            code: 1,
        }
    }else{
        //失败
        data = {
            msg: 'error', 
            code: 0,
        }
    }
    callback(data);
}

//查找数据的方法
async function search(obj,callback){
    let temp = await address.findAll({where : obj});
    var data;
    if (temp) {
        //成功
        data = {
            msg: 'success', 
            code: 1,
            datas : temp,
        }
    }else{
        //失败
        data = {
            msg: 'error', 
            code: 0,
        }
    }
    callback(data);
}

module.exports = {
    add,
    search,
}

数据处理的方法

let address = require('../server/address');

//添加数据处理的方法
function c_add(req,res){
    address.add(req.query,function(data){
        res.send(data);
    })
}

//添加查询数据的处理方法
function c_search(req,res){
    // console.log(req.query);
    address.search(req.query,function(data){
        res.send(data);
    })
}

module.exports = {
    c_add,
    c_search,
}

api的设置

let express = require('express');
let router = express.Router();

let address = require('../controller/address');

router.get('/add',address.c_add);
router.get('/search',address.c_search);

module.exports = router;

html代码

<select id="pro" name="xuufl" lay-verify="required" lay-search>
    <option value="">请选择</option>
</select>
<select id="city" name="xuufl" lay-verify="required" lay-search>
    <option value="">请选择</option>
</select>
<select id="county" name="xuufl" lay-verify="required" lay-search>
    <option value="">请选择</option>
</select>

js代码

//定义一个方法，添加选择框中的内容
function addContent(data,ele){
    ele.html('');
    ele.append('<option value="" >请选择</option>');
    for(let i = 0; i < data.length; i++){
        var op = $(`<option value="${data[i].id}">${data[i].names}</option>`);
        ele.append(op);
    }
}

//渲染省的方法
function sheng(n,ele){
    $.ajax({
        url : '/addressapi/search',
        type : 'get',
        data : {
            fid : n,
        },
        success : function(res){
            console.log(res);
            addContent(res.datas,ele);
        }
    })
}


sheng(0,$('#pro'))

$('#pro').click(function(){ 
    if($(this).val() == 'undefined') return;
    // console.log($(this).val());

    $('#county').html('<option value="" >请选择</option>')
    sheng($(this).val(),$('#city'));
})

$('#city').click(function(){

    sheng($(this).val(),$('#county'))
})

json数据格式

  "RECORDS": [
    {
      "id": 110000,
      "names": "北京市",
      "fid": 0,
      "createdAt": "13/6/2022 11:42:43",
      "updatedAt": "13/6/2022 11:42:43"
    },
    {
      "id": 110100,
      "names": "市辖区",
      "fid": 110000,
      "createdAt": "13/6/2022 11:42:43",
      "updatedAt": "13/6/2022 11:42:43"
    },
    {
      "id": 110101,
      "names": "东城区",
      "fid": 110100,
      "createdAt": "13/6/2022 11:42:43",
      "updatedAt": "13/6/2022 11:42:43"
    },
    {
      "id": 110102,
      "names": "西城区",
      "fid": 110100,
      "createdAt": "13/6/2022 11:42:43",
      "updatedAt": "13/6/2022 11:42:43"
    },
    {
      "id": 110105,
      "names": "朝阳区",
      "fid": 110100,
      "createdAt": "13/6/2022 11:42:43",
      "updatedAt": "13/6/2022 11:42:43"
    },
]
}