JavaScript案例：根据籍贯的文本内容，更新二级联动显示

本文链接：https://blog.csdn.net/weixin_43666825/article/details/102770876

之前在完成项目的过程中，遇到一个需求，需要将籍贯的文本信息显示到二级联动的下拉框中，用纯js写完了，现分享如下：

html主要内容

<div class="stuNativePlace">湖北省宜昌市</div>
<button class="show_btn">点击显示到二级联动菜单中</button>
<br>
<select name="select_option_province" id=""></select>
<select name="select_option_cities" id=""></select>
<script src="js/cities.js"></script>
<script src="js/show.js"></script>

js部分

注意两个js的文件引入顺序
第一个为我国的省市县三级联动数据（只用了省市两级）
cities.js文件（三级联动城市数据）来源：四月四日梦：中国城市三级联动数据
第二个js文件为完成需求的主要内容

show.js

// 为籍贯二级联动下拉框中加入数据
// 获取显示直辖市、省的下拉框
var select_option_province = document.getElementsByName("select_option_province")[0];
// 获取直辖市、地级市的下拉框
var select_option_cities = document.getElementsByName("select_option_cities")[0];
// 默认设置为请选择选项
select_option_province.innerHTML = "<option>-请选择-</option>";
select_option_cities.innerHTML = "<option>-请选择-</option>";
// 循环遍历城市列表
for (var i = 0; i < cityData.length; i++) {
    // 将城市列表中的每个元素的text和value作为参数，生成新的option项
    var opt = new Option(cityData[i].text, cityData[i].value);
    // 将新生成的option加入到直辖市、省的下拉框中
    select_option_province.appendChild(opt);
}
// 为直辖市、 省的下拉框加入onchange事件
select_option_province.onchange = function() {
    // 每次改变身份选项后，地级市级和县级下拉框内容清空，设置为“请选择”
    select_option_cities.innerHTML = "<option>-请选择-</option>";
    // 获取当前被选中的option的下标，-1是为了清除加了“请选择”带来的影响
    var a = this.selectedIndex - 1;
    // 循环遍历城市列表
    for (var j = 0; j < cityData[a].children.length; j++) {
        // 将城市列表中的第a个元素的每个children的text和value作为参数，生成新的option项
        var opt = new Option(cityData[a].children[j].text, cityData[a].children[j].value);
        // 将新生成的option加入到地级市的下拉框中
        select_option_cities.appendChild(opt);
    }
}


// 获取按钮，并绑定单击事件
document.getElementsByClassName("show_btn")[0].onclick = function() {
    // 显示籍贯
    var stuNativePlace = document.getElementsByClassName("stuNativePlace")[0].innerHTML;
    // 显示省份
    // console.log(stuNativePlace);
    var select_option_province_names = document.getElementsByName("select_option_province")[0].children;
    // console.dir(select_option_province_names);
    for (var i = 0; i < select_option_province_names.length; i++) {
        var a = stuNativePlace.indexOf(select_option_province_names[i].innerHTML);
        if (a != -1) {
            // console.log(select_option_province_names[i].innerHTML);
            select_option_province_names[i].selected = true;
            var select_option_province_names_value = select_option_province_names[i].value;
            // 刷新显示地级市
            showCities(i);
            break;
        }
    }
    // 解决获取不到地级市的问题的函数
    function showCities(a) {
        // 每次改变省份选项后，地级市级和县级下拉框内容清空，设置为“请选择”
        select_option_cities.innerHTML = "<option>-请选择-</option>";
        // console.log(a);
        // 循环遍历城市列表
        for (var j = 0; j < cityData[a - 1].children.length; j++) {
            // 将城市列表中的第a-1个元素的每个children的text和value作为参数，生成新的option项
            var opt = new Option(cityData[a - 1].children[j].text, cityData[a - 1].children[j].value);
            // 将新生成的option加入到地级市的下拉框中
            select_option_cities.appendChild(opt);
        }
    }
    // 显示地级市
    // console.log(stuNativePlace);
    var select_option_cities_names = document.getElementsByName("select_option_cities")[0].children;
    // console.dir(select_option_cities_names);
    for (var i = 0; i < select_option_cities_names.length; i++) {
        var a = stuNativePlace.indexOf(select_option_cities_names[i].innerHTML);
        if (a != -1) {
            // console.log(select_option_cities_names[i].innerHTML);
            select_option_cities_names[i].selected = true;
            break;
        }
    }
}