简易版JS二级联动效果代码

浏览：351次- 评论：2次- 发布时间：2022-05-19

Html

Css

var data_arr_1data = ["金山湖小区", "龙潭小区", "博福小区"];
var data_arr_1id = ["123", "124", "125"];
var data_arr_2data = [
    ["1栋", "2栋", "3栋"],
    ["A号楼", "B号楼", "C号楼"],
    ["北苑", "南苑", "东苑"]
];
var data_arr_2id = [
    ["A", "B", "C"],
    ["D", "E", "F"],
    ["G", "H", "I"]
];

function gradeChange() {
    var objS = document.getElementById("pid");
    var index = objS.selectedIndex; // 选中索引
    var select1_id = index - 1;
    set_select2(select1_id);
}

function set_select1() {
    //alert(select1_id);
    var pid = document.getElementById("pid");
    var data_arr = data_arr_1data;
    var id_arr = data_arr_1id;
    var select_html = "<option disabled selected value=\"\">请选择小区</option>";
    for (var i = 0; i < id_arr.length; i++) {
        var _data = data_arr[i];
        var _id = id_arr[i];
        select_html += "<option value=\"" + _id + "\">" + _data + "</option>";
    }

pid.innerHTML = select_html;
}

function set_select2(select1_id) {
    //alert(select1_id);
    var pid2 = document.getElementById("pid2");
    var data_arr = data_arr_2data[select1_id];
    var id_arr = data_arr_2id[select1_id];
    var select2_html = "";
    for (var i = 0; i < id_arr.length; i++) {
        var _data = data_arr[i];
        var _id = id_arr[i];
        select2_html += "<option value=\"" + _id + "\">" + _data + "</option>";
    }

pid2.innerHTML = select2_html;
}

set_select1();

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3