Js四级联动(下拉框选择地区)

数据与视图

如何根据数据渲染视图思路?

1:了解已知的数据接结构
2: 知到你要的数据是什么
3: 知道你的页面结构是什么？
4: 想办法拿到你想要的数据；方式有：数组对象的遍历；数组内置API 字符拼API 字符串变数组；数组变字符串，等基本操作。
5：看数据获取到的数据与你搭建的页面结构是否符合？
6：让你获取的数据与你搭建的页面结构相吻合。想办法：处理数据或者调整html结构实现样式
7：将数据渲染到页面中

常见数据处理

1: 数组对象遍历增删改
2: 利用数组内置API
3: 字符串变数组；目的为了更好处理数据
4：数组变字符串。
5：字符串内置API

数据结构不符合时候,如何对数据进行重构?

1: 相同荣类型的数据用放在数组中；
2：有区别的数据放在对象中。区别为属性；
3：数据结构要符合页面htMl 结构

二级联动

1: 遍历1一级的内容
1.5 二级内容初始化。根据一级初始化数据遍历二级内容
所有初始化只执行一次
2：根据用户选择的内容获取二级的数据

select.value
方式二 select.options[select.options.selectedIndex];
给一级select 绑定onchange 事件；每次内容改变时候；都获取用户选择内容
3: 根据获取二级数据二级内容；
如何获取用户选择的一级内容

三级联动

0：一级二级三级内容的初始化处理
0.1 根据数据渲染一级；有默认选项
0.2 根据1级默认选项渲染二级数据有默认选项
0.3 根据二级默认选项渲染三级数有默认选项

1：根据数结构渲染一级内容
1.1 根据数据结构；获取一级内容中数据
1.5 根据一级数据渲染视图

2：根据一级选择内容渲染二级内容
2.1 给一级select 绑定onchange事件
2.2 获取每次一级内容发生改变收的数据 selet.value 或者select.options[select.options.selectedIndex];
2.3 根据获取一级用户选择的内容；获取二级数据
2.4 将二级数据渲染的页面中
2.5 同时需要根据二级默认选项获取三级数据并需要渲染到页面中
3：根据二级渲染三级数据
3.1 给二级select 绑定onchange 事件；
3.2 获取用户选择的二级内容
3.3 根据用户选择的二级内容获取三级数据
3.4 将三级数据渲染到页面中

四级联动

0：一级二级三级内容的初始化处理
0.1 根据数据渲染一级；有默认选项
0.2 根据1级默认选项渲染二级数据有默认选项
0.3 根据二级默认选项渲染三级数有默认选项
0.4 根据三级三级默认选择；渲染四级数据

1：根据数结构渲染一级内容
1.1 根据数据结构；获取一级内容中数据
1.5 根据一级数据渲染视图

2：根据一级选择内容渲染二级内容
2.1 给一级select 绑定onchange事件
2.2 获取每次一级内容发生改变收的数据 selet.value 或者select.options[select.options.selectedIndex];
2.3 根据获取一级用户选择的内容；获取二级数据
2.4 将二级数据渲染的页面中
2.5 同时需要根据二级默认选项获取三级数据并需要渲染到页面中
2.6 同数渲染四级数据。
3：根据二级渲染三级数据
3.1 给二级select 绑定onchange 事件；
3.2 获取用户选择的二级内容
3.3 根据用户选择的二级内容获取三级数据
3.4 将三级数据渲染到页面中
3.3 当选中二级时候；同时渲染四级数据。

4：根据三级获取四级

Js部分：

var province = document.getElementById("province");
    var city = document.getElementById("city");
    var district = document.getElementById("district");
    var street = document.getElementById("street");

    var provinceData = area;
    var cityData;
    var districtData;
    var streetData;

    // 获取所有的省 初始化省
    createOpt(province, provinceData);

    // 初始化市
    cityData = provinceData[province.value][0];
    createOpt(city, cityData);

    // 初始化 区
    districtData = cityData[city.value];
    for (var i = 0; i < districtData.length; i++) {
        createOpt(district, districtData[i]);
    }

    // 初始化 街道
    streetData = districtData[0][district.value];
    var streetArr = streetData.replace(/[" "]/g, "").split("、");
    createOpt(street, streetArr);

    // 点击省 改变市 区 街道
    province.onchange = function () {
        cityData = provinceData[province.value][0];
        // 清空 【市】 中 option 样式
        clearOpt(city);
        createOpt(city, cityData);

        // 改变 区
        changeDis();

        // 改变街道
        changeStr();
    }

    // 点击市 改变区 街道
    city.onchange = changeDis;
    // 点击区 改变街道
    district.onchange = changeStr;
    // 封装 创建 option
    // sel(select标签)  data(需要遍历的数据)
    function createOpt(sel, data) {
        // 如果data是对象
        if (data.constructor === Object) {
            for (var x in data) {
                var opt = document.createElement("option");
                opt.innerHTML = x;
                sel.appendChild(opt);
            }
        } else if (data.constructor === Array) {// 如果data是数组
            for (var i = 0; i < data.length; i++) {
                var opt = document.createElement("option");
                opt.innerHTML = data[i];
                sel.appendChild(opt);
            }
        }
    }

    // 封装清空的option 样式
    function clearOpt(sel) {
        var opts = sel.options;
        for (var i = 0; i < opts.length; i++) {
            sel.removeChild(opts[i]);
            --i;
        }
    }

    // 封装 改变 区 街道
    function changeDis() {
        // 先清 option 样式
        clearOpt(district);
        districtData = cityData[city.value];
        for (var i = 0; i < districtData.length; i++) {
            createOpt(district, districtData[i]);
        }
        changeStr();
    }

    function changeStr(){
        clearOpt(street);
        // 获取区的option 元素集合
        var disopts = district.options;
        // 获取option 元素 索引
        var districtIndex = disopts.selectedIndex;
        // 获取option 数据
        var strIndex = district.value;
        // 获取 街道
        streetData = districtData[districtIndex][strIndex];
        streetArr = streetData.replace(/[" "]/,"").split("、");
        createOpt(street,streetArr);
    }

div部分：

<select name="" id="province"></select>
  <select name="" id="city"></select>
   <select name="" id="district"></select>
   <select name="" id="street"></select>

来源：CSDN

作者：CQ_天道酬勤

链接：https://blog.csdn.net/qq_35396397/article/details/103643792

标签

select

下拉框

初始化

option

数组