从对象中选择选项以在下一次选择中显示下一个选项

Question

尝试进行 3 次选择。

在第一个中，您选择地区，然后在第二个选择中，您可以从该地区选择城镇，然后在第三个选择该城镇的酒店。

区域选择工作正常，但城镇选择坏了，酒店也坏了。我想在没有 jQuery 的情况下这样做

var region = document.getElementById('region');

var town = document.getElementById('town');

var hotel = document.getElementById('hotel');

    

    

var json = {

        'regions':{

            'region1':{

                'Town1_1':['hotel1_1_1', 'hotel1_1_2'],

                'Town1_2':['hotel1_2_1', 'hotel1_2_2'],

                'Town1_3':['hotel1_3_1', 'hotel1_3_2'],

                'Town1_4':['hotel1_4_1', 'hotel1_4_2'],

            },

            'region2':{

                'Town2_1':['hotel2_1_1', 'hotel2_1_2'],

                'Town2_2':['hotel2_2_1', 'hotel2_2_2'],

                'Town2_3':['hotel2_3_1', 'hotel2_3_2'],

                'Town2_4':['hotel2_4_1', 'hotel2_4_2'],

                'Town2_5':['hotel2_5_1', 'hotel2_5_2'],

            },

             'region3':{

                'Town3_1':['hotel3_1_1', 'hotel3_1_2'],

                'Town3_2':['hotel3_2_1', 'hotel3_2_2'],

                'Town3_3':['hotel3_3_1', 'hotel3_3_2'],

                'Town3_4':['hotel3_4_1', 'hotel3_4_2'],

                'Town3_5':['hotel3_5_1', 'hotel3_5_2'],

                'Town3_6':['hotel3_6_1', 'hotel3_6_2'],

            },

        } 

    }

    var key = Object.keys(json.regions);

    for (var i = 0; i < key.length; i++) {

        var opt = document.createElement('option');

        opt.innerHTML = key[i];

        region.appendChild(opt);

    }

    

    region.addEventListener('change', selectRegion);

    

    function selectRegion() {

    

        if (region == 'region1'){

            var key1 = Object.keys(json.regions.region1)

            for (let i = 0; i < key1.length; i++) {

                var opt1 = document.createElement('option');

                opt1.innerHTML = key1[i];

                town.appendChild(opt1);

            }

            

        }

Answer 1

var region = document.getElementById('region');var town = document.getElementById('town');var hotel = document.getElementById('hotel');var json = {"regions":{"region1":{"Town1_1":["hotel1_1_1","hotel1_1_2"],"Town1_2":["hotel1_2_1","hotel1_2_2"],"Town1_3":["hotel1_3_1","hotel1_3_2"],"Town1_4":["hotel1_4_1","hotel1_4_2"]},"region2":{"Town2_1":["hotel2_1_1","hotel2_1_2"],"Town2_2":["hotel2_2_1","hotel2_2_2"],"Town2_3":["hotel2_3_1","hotel2_3_2"],"Town2_4":["hotel2_4_1","hotel2_4_2"],"Town2_5":["hotel2_5_1","hotel2_5_2"]},"region3":{"Town3_1":["hotel3_1_1","hotel3_1_2"],"Town3_2":["hotel3_2_1","hotel3_2_2"],"Town3_3":["hotel3_3_1","hotel3_3_2"],"Town3_4":["hotel3_4_1","hotel3_4_2"],"Town3_5":["hotel3_5_1","hotel3_5_2"],"Town3_6":["hotel3_6_1","hotel3_6_2"]}}};region.innerHTML="";var regions=Object.keys(json.regions);regions.forEach(&nbsp; regionkey=>{&nbsp; &nbsp; var option=document.createElement("option");&nbsp; &nbsp; option.textContent=regionkey;&nbsp; &nbsp; region.append(option);&nbsp; });changetown();changehotel();function changetown() {&nbsp; var selectedregion=region[region.selectedIndex].textContent;&nbsp; town.innerHTML="";&nbsp; var towns=Object.keys(json.regions[selectedregion]);&nbsp; towns.forEach(&nbsp; &nbsp; townkey=>{&nbsp; &nbsp; &nbsp; var option=document.createElement("option");&nbsp; &nbsp; &nbsp; option.textContent=townkey;&nbsp; &nbsp; &nbsp; town.append(option);&nbsp; &nbsp; }&nbsp; );&nbsp; changehotel();}function changehotel() {&nbsp; var selectedregion=region[region.selectedIndex].textContent;&nbsp; var selectedtown=town[town.selectedIndex].textContent;&nbsp;&nbsp;&nbsp; hotel.innerHTML="";&nbsp; var hotels=json.regions[selectedregion][selectedtown];&nbsp; hotels.forEach(&nbsp; &nbsp; hotelvalue=>{&nbsp; &nbsp; &nbsp; var option=document.createElement("option");&nbsp; &nbsp; &nbsp; option.textContent=hotelvalue;&nbsp; &nbsp; &nbsp; hotel.append(option);&nbsp; &nbsp; }&nbsp; );}function dosomething() {&nbsp; if(&nbsp; &nbsp; (region.selectedIndex!=-1) &&&nbsp; &nbsp; (town.selectedIndex!=-1) &&&nbsp; &nbsp; (hotel.selectedIndex!=-1)&nbsp; ) {&nbsp; &nbsp; var selectedregion=region[region.selectedIndex].textContent;&nbsp; &nbsp; var selectedtown=town[town.selectedIndex].textContent;&nbsp; &nbsp; var selectedhotel=hotel[hotel.selectedIndex].textContent;&nbsp;&nbsp;&nbsp; &nbsp; console.log("Final: ", selectedregion, selectedtown, selectedhotel);&nbsp; }}<select id="region" onchange="changetown()" ></select><select id="town"&nbsp; &nbsp;onchange="changehotel()"></select><select id="hotel"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ></select><button id="go"&nbsp; &nbsp; &nbsp;onclick ="dosomething()">Go!</button>

Answer 2

这应该这样做：const data = {regions:{region1:{&nbsp; &nbsp; &nbsp;'Town1_1':['hotel1_1_1', 'hotel1_1_2'],'Town1_2':['hotel1_2_1', 'hotel1_2_2'],'Town1_3':['hotel1_3_1', 'hotel1_3_2'],'Town1_4':['hotel1_4_1', 'hotel1_4_2'],},&nbsp; &nbsp; &nbsp; 'region2':{&nbsp; &nbsp; &nbsp;'Town2_1':['hotel2_1_1', 'hotel2_1_2'],'Town2_2':['hotel2_2_1', 'hotel2_2_2'],'Town2_3':['hotel2_3_1', 'hotel2_3_2'],'Town2_4':['hotel2_4_1', 'hotel2_4_2'],'Town2_5':['hotel2_5_1', 'hotel2_5_2'],},&nbsp; &nbsp; &nbsp; &nbsp;'region3':{&nbsp; &nbsp; &nbsp;'Town3_1':['hotel3_1_1', 'hotel3_1_2'],'Town3_2':['hotel3_2_1', 'hotel3_2_2'],'Town3_3':['hotel3_3_1', 'hotel3_3_2'],'Town3_4':['hotel3_4_1', 'hotel3_4_2'],'Town3_5':['hotel3_5_1', 'hotel3_5_2'],'Town3_6':['hotel3_6_1', 'hotel3_6_2'],}&nbsp; &nbsp; &nbsp;}};&nbsp;&nbsp;const mkopts=arr=>arr.map(r=>`<option>${r}</option>`).join(""),&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; sall= [...document.querySelectorAll('select')];sall.forEach((sel,i)=>{&nbsp; if (!i) sel.innerHTML=mkopts(Object.keys(data.regions)); // initially fill first select with options&nbsp; if (i<2) {&nbsp; // change options of following select whenever one of the first two changes&nbsp; &nbsp; sel.onchange=()=>{ let nsel=sall[i+1];&nbsp; &nbsp; &nbsp; sall[2].innerHTML=""; // clear last select box options first&nbsp; &nbsp; &nbsp; nsel.innerHTML=mkopts( // depending on situation (--> i ) get different options:&nbsp; &nbsp; &nbsp; &nbsp; i ?&nbsp; Object.values(data.regions[sall[0].value][sall[1].value])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :&nbsp; Object.keys(data.regions[sall[0].value]) );&nbsp;&nbsp; &nbsp; &nbsp; !i && nsel.onchange();&nbsp; &nbsp; }&nbsp; }});sall[0].onchange()<select id='region'></select><select id='town'></select><select id='hotel'></select>

Answer 3

更通用的解决方案怎么样？var json = {'regions': {'region1': {'Town1_1': ['hotel1_1_1', 'hotel1_1_2'],'Town1_2': ['hotel1_2_1', 'hotel1_2_2'],'Town1_3': ['hotel1_3_1', 'hotel1_3_2'],'Town1_4': ['hotel1_4_1', 'hotel1_4_2'],},'region2': {'Town2_1': ['hotel2_1_1', 'hotel2_1_2'],'Town2_2': ['hotel2_2_1', 'hotel2_2_2'],'Town2_3': ['hotel2_3_1', 'hotel2_3_2'],'Town2_4': ['hotel2_4_1', 'hotel2_4_2'],'Town2_5': ['hotel2_5_1', 'hotel2_5_2'],},'region3': {'Town3_1': ['hotel3_1_1', 'hotel3_1_2'],'Town3_2': ['hotel3_2_1', 'hotel3_2_2'],'Town3_3': ['hotel3_3_1', 'hotel3_3_2'],'Town3_4': ['hotel3_4_1', 'hotel3_4_2'],'Town3_5': ['hotel3_5_1', 'hotel3_5_2'],'Town3_6': ['hotel3_6_1', 'hotel3_6_2'],},},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 'heirarchy': ['region', 'town', 'hotel']};function updateSelects(el) {&nbsp; &nbsp; const heirarchy = json.heirarchy;&nbsp; &nbsp; let selection = json.regions;&nbsp; &nbsp; let level = json.heirarchy.indexOf(el);&nbsp; &nbsp; for(let l=0;l<=level;l++) {&nbsp; &nbsp; &nbsp; &nbsp; let text = document.getElementById(json.heirarchy[l]);&nbsp; &nbsp; &nbsp; &nbsp; text = text.options[text.selectedIndex].text;&nbsp; &nbsp; &nbsp; &nbsp; selection = selection[text]; // iterate selected levels&nbsp; &nbsp; }&nbsp; &nbsp; level++;&nbsp; &nbsp; el = document.getElementById(heirarchy[level]);&nbsp; &nbsp; for(var i=level;i<heirarchy.length;i++) {&nbsp; &nbsp; &nbsp; &nbsp; clearSelect(document.getElementById(heirarchy[i]));&nbsp; &nbsp; }&nbsp; &nbsp; for (let i in selection) {&nbsp; &nbsp; &nbsp; &nbsp; if (selection.constructor === Array) i = selection[i];&nbsp; &nbsp; &nbsp; &nbsp; var opt1 = document.createElement('option');&nbsp; &nbsp; &nbsp; &nbsp; opt1.innerText = i;&nbsp; &nbsp; &nbsp; &nbsp; el.appendChild(opt1);&nbsp; &nbsp; }}function clearSelect(el) {&nbsp; &nbsp; while (el.options.length) el.removeChild(el.options[0]);}updateSelects();<select id='region' onchange="updateSelects(this.id)"></select><select id='town' onchange="updateSelects(this.id)"></select><select id='hotel'></select>