Html部分

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <script src="jquery3.min.js"></script>
    <title>Document</title>
  </head>
  <body>
    <select name="pro" id="pro">
      <option value="0">
        请选择
      </option></select
    >
    <select name="" id="city">
      <option value="">请选择</option>
    </select>

    <select name="" id="con">
      <option value="">请选择</option>
    </select>
  </body>
</html>

JS部分///存储城市

  <script>
    var provice = [
      { pid: 1, pname: "湖北" },
      { pid: 2, pname: "河北" },
      { pid: 3, pname: "河南" }
    ];

    var cities = [
      { cid: 1, cname: "武汉", pid: 1 },
      { cid: 2, cname: "郑州", pid: 3 },
      { cid: 3, cname: "石家庄", pid: 2 },
      { cid: 4, cname: "鄂州", pid: 1 },
      { cid: 5, cname: "荆州", pid: 1 },
      { cid: 6, cname: "洛阳", pid: 3 },
      { cid: 7, cname: "开封", pid: 3 },
      { cid: 8, cname: "秦皇岛", pid: 2 },
      { cid: 9, cname: "邢台", pid: 2 }
    ];

    var country = [
      { id: 1, cname: "洪山区", cid: 1 },
      { id: 2, cname: "武昌区", cid: 1 },
      { id: 3, cname: "江汉区", cid: 1 },
      { id: 4, cname: "郑州一", cid: 2 },
      { id: 5, cname: "郑州二", cid: 2 },
      { id: 6, cname: "郑州三", cid: 2 },
      { id: 1, cname: "石一", cid: 3 },
      { id: 2, cname: "石二", cid: 3 },
      { id: 3, cname: "石三", cid: 3 },
      { id: 4, cname: "梁子湖", cid: 4 },
      { id: 5, cname: "泽林", cid: 4 },
      { id: 6, cname: "葛店", cid: 4 },
      { id: 1, cname: "荆州", cid: 5 },
      { id: 2, cname: "公安", cid: 5 },
      { id: 3, cname: "洛1", cid: 6 },
      { id: 4, cname: "洛2", cid: 6 },
      { id: 5, cname: "开1", cid: 7 },
      { id: 6, cname: "开2", cid: 7 },
      { id: 1, cname: "秦1", cid: 8 },
      { id: 2, cname: "秦2", cid: 8 },
      { id: 4, cname: "宁晋", cid: 9 },
      { id: 5, cname: "memda", cid: 9 }
    ];

    $.each(provice, function (i, k) {
            var ops = $("<option value='" + k.pid + "'>" + k.pname + "</option>");
            $("#pro").append(ops);
        });
    //无条件将数据添加到第一个下拉列表

    $("#pro").change(function () {
            var pid = $(this).val();
            var city = cities.filter(function (ok) {///过滤函数
                if (pid == ok.pid) {
                    return true;
                }
            });

            $(".city").remove(); // 先 清除 市
            $(".con").remove();
            // 循环追加市
            $.each(city, function (index, val) {
                var ops = $(
                    "<option class='city' value='" +
                    val.cid +
                    "'>" +
                    val.cname +
                    "</option>"
                );

                $("#city").append(ops);
            });
        });
    ///第三框
    $("#city").change(function () {
            var cid = $(this).val();

            var countrys = country.filter(function (item) {
                if (item.cid == cid) {
                    return true;
                }
            });

            $(".con").remove();

            $.each(countrys, function (k, v) {
                var ops = $(
                    "<option class='con' value='" + v.id + "'>" + v.cname + "</option>"
                );

                $("#con").append(ops);
            });
        });
  </script>

在线测试

源码下载

Jquery三级联动

JQ实现三级联动

Edison • March 26, 2019 • Read: 1428 • Web Program

Html部分

JS部分///存储城市

源码下载