Dreidimensionale Javascript-array

Ich versuche zu bauen, ein 3D-Javascript-array, aber ich bin nicht sicher, wie es zu tun, im Grunde habe ich 3 arrays, Provinzen, Städte und Einkaufszentren alle in Folge, so erstellen Sie ein 3D-array zum speichern der Daten und schreiben Sie dann einige jQuery/Javascript raus, was ich brauche.

Ich habe ein Skript, das können füllen Sie eine Dropdown-Liste mit array-Elementen, aber jetzt bin ich hinzufügen eine zusätzliche dimension, um es und ich bin immer ein wenig verwirrt, wie es weiter gehen, hier ist der code, den ich bisher,

Den jQuery:

<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>

HTML:

<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>

So, wie Sie sehen können, ist der obige code erzeugt eine drop-down-Menü der Modelle je nachdem, was ich wähle, was ich jetzt erreichen möchte, ist jetzt das hinzufügen einer weiteren Ebene, so dass Sie klicken Sie auf eine Provinz, dann der Städte-Dropdown erscheint, und, wenn Sie wählen Sie eine Stadt, die Einkaufszentren erscheinen.

Was wäre der beste Weg, dies zu erreichen?

Danke im Voraus!

InformationsquelleAutor Odyss3us | 2010-07-26
  1. 7

    Wenn Sie eine Struktur wie diese

    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: [] }
   ] }
];

    Dann Sie können füllen Sie die dropdowns wie so:

    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 );

    Und auf eine Aktion:

    $('#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 );
});

    BEARBEITEN

    Wenn die Daten-Struktur auf der Oberseite sieht schwer zu Lesen, durch die Art und Weise, es ist genau das gleiche wie die folgenden:

    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" });
    • Danke, werde probieren und Euch auf dem Laufenden halten!
    InformationsquelleAutor David Hedlund
Schreibe einen Kommentar