3 차원 Javascript 배열

Question

3D Javascript 배열을 만들려고 노력하고 있지만 기본적으로 3 배열, 지방, 도시 및 쇼핑몰이 연속적으로 있으므로 3D 배열을 만들고 싶습니다. 모든 데이터를 저장 한 다음 필요한 정보를 얻으려면 jQuery/Javascript를 작성하십시오.

배열 항목이있는 드롭 다운 목록을 채울 수있는 스크립트가 있지만 지금은 추가 차원을 추가하고 진행 방법에 대해 약간 혼란스러워지고 있습니다. 여기까지의 코드는 여기에 있습니다. ,

JQuery와 : 나는 SEL하게 당신이 볼 수 있듯이 그래서

<form> 
<p> 
<span class='left'><label for='make'>Make: </label></span> 
<span class='right'><select name='make' id='make' onchange='makeModel(this);'> 
<option value='0'>Select one</option> 
<option value='1'>one</option> 
<option value='2'>two</option> 
<option value='3'>three</option> 
<option value='4'>four</option> 
</select> 
</span> 
</p> 
<p> 
<div id='model'></div> 
</p> 
</form> 

, 위의 코드에 따라 모델의 드롭 다운 메뉴를 생성 다음 HTML은

<script> 
    model[0] = new Array('Arnage', 'Azure', 'Brooklands', 'Continental', 'Corniche', 'Eight', 'Mulsanne', 'Series II', 'Turbo R', 'Turbo RT'); 
    model[1] = new Array('412', '603', 'Beaufighter', 'Blenheim', 'Brigand', 'Britannia'); 
    model[2] = new Array('Inyathi', 'Rhino'); 
    model[3] = new Array('Amandla', 'Auto Union', 'Horch'); 

      function makeModel(obj){ 

      var curSel=obj.options[obj.selectedIndex].value ; 
      var x; 

      if (curSel != 'null'){ 


       $('#model').css({'display' : 'block'}); 

       $('#model').html("<select name='model' id='sub'>"); 
       for (x in model[curSel]) 
       { 

        $('#sub').append("<option value='" + model[curSel][x] + "'>" + model[curSel][x] + "</option>"); 
       } 

      }else{ 
       $('#model').css({'display' : 'block'}); 
      } 
     } 

</script> 

요즘 내가 지금 달성하고자하는 것은 하나의 레벨을 더 추가하여 지방을 클릭하면 도시가 드롭 다운되고 도시를 선택하면 쇼핑몰이 나타납니다.

어떻게 접근하는 것이 가장 좋을까요?

고맙습니다!

Answer 1

이 하나

var provinces = [ 
    { name: "Province A", cities: [ 
     { name: "City A.A", malls: [ 
      { name: "Mall A.A.1" }, 
      { name: "Mall A.A.2" } 
     ] }, 
     { name: "City A.B", malls: [ 
      { name: "Mall A.B.1" } 
     ] } 
    ] }, 
    { name: "Province B", cities: [ 
     { name: "City B.A", malls: [ 
      { name: "Mall B.A.1" }, 
      { name: "Mall B.A.2" } 
     ] }, 
     { name: "City B.B", malls: [] } 
    ] } 
]; 

같은 구조가 그런 당신이 그렇게 같은 드롭 다운을 채울 수있는 경우 :

function populateDropdown(drop, items) { 
    drop.empty(); 
    for(var i = 0; i < items.length; i++) { 
     drop.append('<option value=' + i + '>' + items[i].name + '</option>'); 
    } 
    drop.show(); 
} 

populateDropdown($('#provinces'), provinces); 

을 그리고 행동에 :

$('#provinces').change(function() { 
    var provinceIndex = $(this).val(); 
    var province = provinces[provinceIndex]; 

    populateDropdown($('#cities'), province.cities); 

    $('#malls').hide(); 
}); 

$('#cities').change(function() { 
    var provinceIndex = $('#provinces').val(); 
    var province = provinces[provinceIndex]; 

    var cityIndex = $(this).val(); 
    var city = province.cities[cityIndex]; 

    populateDropdown($('#malls'), city.malls); 
}); 

편집

상단에있는 데이터 구조를 알아보기 힘들 보이는 경우

는, 그런데, 그것은 다음과 같이 똑같은 일이 :

var provinces = []; 

// populate provinces 
provinces.push({ name: "Province A", cities: [] }); 
provinces.push({ name: "Province B", cities: [] }); 

// populate cities 
provinces[0].cities.push({ name: "City A.A", malls: [] }); 
provinces[0].cities.push({ name: "City A.B", malls: [] }); 
provinces[1].cities.push({ name: "City B.A", malls: [] }); 
provinces[1].cities.push({ name: "City B.B", malls: [] }); 

// populate malls 
provinces[0].cities[0].malls.push({ name: "Mall A.A.1" }); 
provinces[0].cities[0].malls.push({ name: "Mall A.A.2" }); 
provinces[0].cities[1].malls.push({ name: "Mall A.B.1" }); 
provinces[1].cities[0].malls.push({ name: "Mall B.A.1" }); 
provinces[1].cities[0].malls.push({ name: "Mall B.A.2" });