js三级联动

 <div class="container">
        <select name="" id="hero">
            <option value="">-请选择-</option>
        </select>
        <select name="" id="skin">
            <option value="">-请选择-</option>
        </select>
        <select name="" id="price">
            <option value="">-请选择-</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     //this.value即为选中数据在数组中的下标 
48     let index = this.value;
49     newArr = price_array[index]
50     create_option(skin_array[index], skin)
51 })
52 skin.addEventListener('change', function () {
53     price.options.length = 1;
54     let index = this.value;
55     create_option(newArr[index], price)
56 })