js三级联动嵌套列表

JavaScript 三级联动嵌套列表是一种常见的交互式用户界面元素，它允许用户通过三个相互关联的下拉列表（或选择框）来选择数据。这种设计通常用于展示具有层级关系的数据，例如国家、省份和城市。

基础概念

三级联动：指的是三个下拉列表相互关联，选择一个列表的值会影响其他列表的显示内容。
嵌套列表：指的是数据结构中存在层级关系，如上述的国家、省份、城市。

优势

用户体验：用户可以直观地看到不同层级之间的关系，操作简便。
数据组织：有助于组织和展示具有复杂层级关系的数据。
减少输入错误：通过预定义的选项减少手动输入可能导致的错误。

类型

静态数据：预先定义好的数据集。
动态数据：通过API从服务器获取的数据。

应用场景

地址选择：国家、省份、城市。
分类筛选：商品的大类、中类、小类。
时间选择：年、月、日。

示例代码

以下是一个简单的三级联动嵌套列表的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级联动示例</title>
<script>
window.onload = function() {
    var data = {
        "中国": {
            "北京": ["东城区", "西城区"],
            "上海": ["浦东区", "徐汇区"]
        },
        "美国": {
            "纽约州": ["纽约市", "布法罗"],
            "加利福尼亚州": ["洛杉矶", "旧金山"]
        }
    };

    var countrySelect = document.getElementById('country');
    var stateSelect = document.getElementById('state');
    var citySelect = document.getElementById('city');

    // 初始化国家选项
    for (var country in data) {
        var option = document.createElement('option');
        option.value = country;
        option.text = country;
        countrySelect.appendChild(option);
    }

    // 国家选择变化时更新省份
    countrySelect.onchange = function() {
        stateSelect.innerHTML = '<option value="">请选择省份</option>';
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        var selectedCountry = this.value;
        if (selectedCountry) {
            for (var state in data[selectedCountry]) {
                var option = document.createElement('option');
                option.value = state;
                option.text = state;
                stateSelect.appendChild(option);
            }
        }
    };

    // 省份选择变化时更新城市
    stateSelect.onchange = function() {
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        var selectedCountry = countrySelect.value;
        var selectedState = this.value;
        if (selectedState) {
            for (var city of data[selectedCountry][selectedState]) {
                var option = document.createElement('option');
                option.value = city;
                option.text = city;
                citySelect.appendChild(option);
            }
        }
    };
};
</script>
</head>
<body>
    <select id="country">
        <option value="">请选择国家</option>
    </select>
    <select id="state">
        <option value="">请选择省份</option>
    </select>
    <select id="city">
        <option value="">请选择城市</option>
    </select>
</body>
</html>