js三级联动 

 <div class="container">
        <select name="" id="hero">
            <option value="-1">-请选择-</option>
        </select>
        <select name="" id="skin">
            <option value="-1">-请选择-</option>
        </select>
        <select name="" id="price">
            <option value="-1">-请选择-</option>
        </select>
    </div>

　　js代码

 1 let hero_array = ['孙策', '凯', '李白']
 2 let skin_array = [
 3     ['猫狗日记', '挚爱之约', '末日机甲', '海之征途'],
 4     ['曙光守护者', '绛天战甲', '青龙志', '龙域领主'],
 5     ['范海辛', '敏锐之力', '千年之狐', '凤求凰', '鸣剑曳影']
 6 
 7 ]
 8 let price_array = [
 9     [
10         ['888'],
11         ['1688'],
12         ['1688'],
13         ['288']
14     ], [
15         ['888'],
16         ['1688'],
17         ['888'],
18         ['288']
19     ], [
20         ['288'],
21         ['488'],
22         ['888'],
23         ['1688'],
24         ['18888']
25     ]
26 ]
27 let hero = document.querySelector("#hero")
28 let skin = document.querySelector("#skin")
29 let price = document.querySelector("#price")
30 // 创建一个全局空数组，用来当做中介
31 let newArr = [];
32 // 封装一个创建option节点的函数
33 function create_option(arr, obj) {
34     for (let i = 0; i < arr.length; i++) {
35         // Option(text,value)
36         let option = new Option(arr[i], i);
37         obj.appendChild(option)
38     }
39 }
40 // 初始化，先渲染一级数组数据
41 create_option(hero_array, hero);
42 
43 hero.addEventListener('change', function () {
44     // 当hero变化时，初始化skin，price
45     skin.options.length = 1;
46     price.options.length = 1;
47     if (this.value >= 0) {
48         //this.value即为选中数据在数组中的下标 
49         let index = this.value;
50         newArr = price_array[index]
51         create_option(skin_array[index], skin)
52     } else {
53         return;
54     }
55 })
56 skin.addEventListener('change', function () {
57     price.options.length = 1;
58     if (this.value >= 0) {
59         let index = this.value;
60         create_option(newArr[index], price)
61     } else {
62         return;
63     }
64 })

 

let hero_array = ['孙策', '凯', '李白']
let skin_array = [
    ['猫狗日记', '挚爱之约', '末日机甲', '海之征途'],
    ['曙光守护者', '绛天战甲', '青龙志', '龙域领主'],
    ['范海辛', '敏锐之力', '千年之狐', '凤求凰', '鸣剑曳影']

]
let price_array = [
    [
        ['888'],
        ['1688'],
        ['1688'],
        ['288']
    ], [
        ['888'],
        ['1688'],
        ['888'],
        ['288']
    ], [
        ['288'],
        ['488'],
        ['888'],
        ['1688'],
        ['18888']
    ]
]
let hero = document.querySelector("#hero")
let skin = document.querySelector("#skin")
let price = document.querySelector("#price")
// 创建一个全局空数组，用来当做中介
let newArr = [];
// 封装一个创建option节点的函数
function create_option(arr, obj) {
    for (let i = 0; i < arr.length; i++) {
        // Option(text,value)
        let option = new Option(arr[i], i);
        obj.appendChild(option)
    }
}
// 初始化，先渲染一级数组数据
create_option(hero_array, hero);

hero.addEventListener('change', function () {
    // 当hero变化时，初始化skin，price
    skin.options.length = 1;
    price.options.length = 1;
    if (this.value >= 0) {
        //this.value即为选中数据在数组中的下标
        let index = this.value;
        newArr = price_array[index]
        create_option(skin_array[index], skin)
    } else {
        return;
    }
})
skin.addEventListener('change', function () {
    price.options.length = 1;
    if (this.value >= 0) {
        let index = this.value;
        create_option(newArr[index], price)
    } else {
        return;
    }
})
posted @ 2022-08-30 21:30  丹江路39号  阅读(58)  评论(0)    收藏  举报