纯js实现二级联动代码

1、html代码

<select onchange="gradeChange()" id="first">
<option disabled="" selected="" value="">请选择大类</option>
</select>
<select id="second">
<option disabled="" selected="" value="">请选选择小类</option>
</select>

js代码

var firstData = ["家电", "图书", "医药"];
var firstIds = ["123", "124", "125"];
var secondData = [
    ["电风扇", "电表箱", "洗衣机"],
    ["科幻小说", "雨果奖入选"],
    ["感冒", "减肥", "骨折"]
];
var data_arr_2id = [
    ["A", "B", "C"],
    ["D", "E", "F"],
    ["G", "H", "I"]
];

function gradeChange() {
    var objS = document.getElementById("first");
    var index = objS.selectedIndex; // 选中索引
    var id = index - 1;
    setSecond(id);
}

function setFirst() {
    //alert(id);
    var first = document.getElementById("first");
    var data_arr = firstData;
    var id_arr = firstIds;
    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>";
    }
    first.innerHTML = select_html;
}
 
function setSecond(id) {
    //alert(id);
    var second = document.getElementById("second");
    var data_arr = secondData[id];
    var id_arr = data_arr_2id[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>";
    }
    second.innerHTML = select2_html;
}

setFirst();

进入前端入门建站教程官网入口

jquery利用select实现多级联动（省市县）

layui做城市三级联动代码介绍

远离javascript/jquery纯css3实现多级导航栏联动

vuejs实现全站联动

中国城市三级联动菜单json

标签： 二级联动, 多级联动

上面是“纯js实现二级联动代码”的全面内容，想了解更多关于 js 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_2122.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！