<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>two cascades</title><style>*{margin: 0;padding: 0;}#box{width: 400px;margin: 50px auto;}select{padding: 5px;}option{display: block;}</style></head><body><div id="box"><select name="career" id="career"><option value="none">--请选择职业--</option></select><select name="hero" id="hero"><option value="none"></option></select><select name="skill" id="skill"><option value="none"></option></select></div><script>var king = [// {// 'c_name' : '--请选择职业--',// 'c_id' : 'fs',// },{'c_name' : '法师','c_id' : 'fs','herose':[{'h_name' : '诸葛亮','h_id' : 'zgl',// 'skills':[// {// 's_name' : '东风破袭',// 's_id' : 'dfpx'// },{// 's_name' : '时空穿梭',// 's_id' : 'skcs'// },{// 's_name' : '元气弹',// 's_id' : 'yqd'// }// ]},{'h_name' : '小乔','h_id' : 'xq',// 'skills':[// {// 's_name' : '绽放之舞',// 's_id' : 'zfzw'// },{// 's_name' : '甜蜜恋风',// 's_id' : 'tmlf'// },{// 's_name' : '星华缭乱',// 's_id' : 'xhll'// }// ]},{'h_name' : '妲己','h_id' : 'dj',// 'skills':[// {// 's_name' : '灵魂冲击',// 's_id' : 'lhcj'// },{// 's_name' : '偶像魅力',// 's_id' : 'oxml'// },{// 's_name' : '女王崇拜',// 's_id' : 'nwcb'// }// ]},{'h_name' : '貂蝉','h_id' : 'wzj',// 'skills':[// {// 's_name' : '落·红雨',// 's_id' : 'lhy'// },{// 's_name' : '缘·心结',// 's_id' : 'yxj'// },{// 's_name' : '绽·风华',// 's_id' : 'zfh'// }// ]},{'h_name' : '甄姬','h_id' : 'zj',// 'skills':[// {// 's_name' : '泪如泉涌',// 's_id' : 'lrqy'// },{// 's_name' : '叹息水流',// 's_id' : 'txsl'// },{// 's_name' : '洛神降临',// 's_id' : 'lsjl'// }// ]}]},{'c_name' : '射手','c_id' : 'ss','herose':[{'h_name' : '虞姬','h_id' : 'yj',// 'skills':[// {// 's_name' : '楚歌起',// 's_id' : 'cgq'// },{// 's_name' : '大风来',// 's_id' : 'dfl'// },{// 's_name' : '阵前舞',// 's_id' : 'zqw'// }// ]},{'h_name' : '狄仁杰','h_id' : 'drj',// 'skills':[// {// 's_name' : '六令追凶',// 's_id' : 'llzz'// },{// 's_name' : '逃脱',// 's_id' : 'tt'// },{// 's_name' : '王朝密令',// 's_id' : 'wcml'// }// ]},{'h_name' : '马可波罗','h_id' : 'mkbl',// 'skills':[// {// 's_name' : '华丽左轮',// 's_id' : 'hlzl'// },{// 's_name' : '漫游之枪',// 's_id' : 'myzq'// },{// 's_name' : '狂热弹幕',// 's_id' : 'krdm'// }// ]},{'h_name' : '孙尚香','h_id' : 'ssx',// 'skills':[// {// 's_name' : '翻滚突袭',// 's_id' : 'fgtx'// },{// 's_name' : '红莲爆弹',// 's_id' : 'hlbd'// },{// 's_name' : '究极弩炮',// 's_id' : 'jjnp'// }// ]},{'h_name' : '百里守约','h_id' : 'blsy',// 'skills':[// {// 's_name' : '静谧之眼',// 's_id' : 'jmzy'// },{// 's_name' : '狂风之息',// 's_id' : 'kfzx'// },{// 's_name' : '逃脱',// 's_id' : 'tt'// }// ]}]}];var skills = []var career = document.querySelector('#career');for (var i = 0; i < king.length; i++ ) {var option = document.createElement('option');option.value = king[i].c_id;option.innerHTML = king[i].c_name;career.appendChild(option);}var hero;career.onchange = function () {var proid = this.value;var herose;for (var i = 0; i<king.length; i++) {if(proid == king[i].c_id) {herose = king[i].herose;}}hero = document.querySelector('#hero');hero.innerHTML = "<option value='none'>--请选择英雄--</option>";for (var i = 0; i<herose.length; i++ ) {var option = document.createElement('option');option.innerHTML = herose[i].h_name;option.value = herose[i].h_id;hero.appendChild(option);}hero.onchange = function () {var coding = this.value;var skills;hero = document.querySelector('#hero')[0];for (var i = 0; i<hero.length; i++) {if (coding == hero[i].h_id) {skills = hero[i].skills;}}var skill = document.querySelector('#skill');skill.innerHTML = "<option value='none'>--请选择技能--</option>";for (var i = 0; i<skills.length; i++) {var option = document.createElement('option');option.innerHTML = skills[i].s_name;option.value = skills[i].s_id;skill.appendChild(option);}}}</script></body></html>
添加回答
举报
0/150
提交
取消