What are all these extra values appearing in dropdown list?

Question

To start, I created a static version of an auto-populate dropdown list from another input.

This worked fine, but when I put it into a joomla site, and put all the head tags in, I get it working as it should, but in the second dropdown field I'm getting a load of extra values for every item.

The code I'm using for the head is:

<script type="text/javascript">
var items = [];
items["24 Hour Blips"] = [  "24DPBU1200 - 1200mm Built Up Non-Illuminated Logo",
            "24DPBU1500 - 1500mm Built Up Non-Illuminated Logo",
            "24DPBU1700 - 1700mm Built Up Non-Illuminated Logo",
            "24DPBU2000 - 2000mm Built Up Non-Illuminated Logo"
          ];
items["Car Park Signs"] = [ "FS1 - 640mm x 1800mm Car Park Flag Double Sided",
            "FS2 - 700mm x 1250mm Car Park Flag Double Sided",
            "FS3 - 1250mm x 1250mm Car Park Directional Single Sided",
            "FS4 - 1250mm x 1250mm Car Park Directional Double Sided",
            "FS5 - 1250mm x 860mm Car Park Directional Single Sided",
            "FS6 - 1250mm x 860mm Car Park Directional Double Sided",
            "FS7 - 600mm x 800mm Disclaimer Single Sided",
            "FS8 - 600mm x 800mm Disclaimer Double Sided",
            "FS9 - 800mm x 700mm Welcome Single Sided",
            "FS10 - 800mm x 700mm Welcome Double Sided",
            "FS11 - 2843mm x 1000mm Car Park Directional Single Sided",
            "FS12 - 2843mm x 1000mm Car Park Directional Double Sided",
            "FDP - 885mm x 260mm Finger Directional Post",
            "FD - 885mm x 260mm Finger Directional",
            "FDWM - 885mm x 260mm Finger Directional Wall Mounted"
          ];
items["Flex Letters"] = [ "FL3500 - 3500mm Illuminated Flex 'TESCO' Letters",
            "FL4200 - 4200mm Illuminated Flex 'TESCO' Letters",
            "FLE3500 - 3500mm Illuminated Flex 'EXTRA' Letters",
            "FLE4200 - 4200mm Illuminated Flex 'EXTRA' Letters"
          ];


items["Gantry Signs"] = [ "GAN4300 - Twin Post 4.3m Main Store Gantry",
                "GAN5700 - Twin Post 5.7m Main Store Gantry",
                "GAN7100 - Twin Post 7.1m Main Store Gantry",
                "SP-GAN4300 - Single Post 4.3m Main Store Gantry",
                "SP-GAN5700 - Single Post 5.7m Main Store Gantry",
                "SP-GAN7100 - Single Post 7.1m Main Store Gantry",
                "GANPFS4300 - Twin Post 4.3m PFS Gantry",
                "GANPFS5700 - Twin Post 5.7m PFS Gantry",
                "GANPFS7100 - Twin Post 7.1m PFS Gantry",
                "SP-GANPFS4300 - Single Post 4.3m PFS Gantry",
                "SP-GANPFS5700 - Single Post 5.7m PFS Gantry",
                "SP-GANPFS7100 - Single Post 7.1m PFS Gantry",
                "RETRO4300 - Twin Post 4.3m Main Store Gantry Retro Kit",
                "RETRO5700 - Twin Post 5.7m Main Store Gantry Retro Kit",
                "RETRO7100 - Twin Post 7.1m Main Store Gantry Retro Kit",
                "RETROPFS4300 - Twin Post 4.3m PFS Gantry Retro Kit",
                "RETROPFS5700 - Twin Post 5.7m PFS Gantry Retro Kit",
                "RETROPFS7100 - Twin Post 7.1m PFS Gantry Retro Kit",
                "GANC - Twin Post Gantry Cage",
                "SP-GANC - Single Post Gantry Cage"
              ];
  items["Illuminated Logo"] = [ "ML600 - 600mm Illuminated Moulded 'TESCO' Letters",
                  "ML900 - 900mm Illuminated Moulded 'TESCO' Letters",
                  "ML1200 - 1200mm Illuminated Moulded 'TESCO' Letters",
                  "ML1500 - 1500mm Illuminated Moulded 'TESCO' Letters",
                  "ML1700 - 1700mm Illuminated Moulded 'TESCO' Letters",
                  "ML2000 - 2000mm Illuminated Moulded 'TESCO' Letters",
                  "ML2500 - 2500mm Illuminated Moulded 'TESCO' Letters",
                  "ML2900 - 2900mm Illuminated Moulded 'TESCO' Letters",
                  "MLE600 - 600mm Illuminated Moulded 'EXTRA' Letters",
                  "MLE900 - 900mm Illuminated Moulded 'EXTRA' Letters",
                  "MLE1200 - 1200mm Illuminated Moulded 'EXTRA' Letters",
                  "MLE1500 - 1500mm Illuminated Moulded 'EXTRA' Letters",
                  "MLE1700 - 1700mm Illuminated Moulded 'EXTRA' Letters",
                  "MLE2000 - 2000mm Illuminated Moulded 'EXTRA' Letters",
                  "MLE2500 - 2500mm Illuminated Moulded 'EXTRA' Letters",
                  "MLE2900 - 2900mm Illuminated Moulded 'EXTRA' Letters"
                ];
  items["Non-Illuminated Logo"] = [ "BUL600 - 600mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BUL900 - 900mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BUL1200 - 1200mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BUL1500 - 1500mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BUL1700 - 1700mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BUL2000 - 2000mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BUL2500 - 2500mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BUL2900 - 2900mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BUL3500 - 3500mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BUL4200 - 4200mm Built Up Non-Illuminated 'TESCO' Letters",
                    "BULE600 - 600mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "BULE900 - 900mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "BULE1200 - 1200mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "BULE1500 - 1500mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "BULE1700 - 1700mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "BULE2000 - 2000mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "BULE2500 - 2500mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "BULE2900 - 2900mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "BULE3500 - 3500mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "BULE4200 - 4200mm Built Up Non-Illuminated 'EXTRA' Letters",
                    "FCL600 - 600mm Flat Cut 'TESCO' Letters",
                    "FCL900 - 900mm Flat Cut 'TESCO' Letters",
                    "FCL1200 - 1200mm Flat Cut 'TESCO' Letters",
                    "FCL1500 - 1500mm Flat Cut 'TESCO' Letters",
                    "FCL1700 - 1700mm Flat Cut 'TESCO' Letters",
                    "FCL2000 - 2000mm Flat Cut 'TESCO' Letters",
                    "FCL2500 - 2500mm Flat Cut 'TESCO' Letters",
                    "FCL2900 - 2900mm Flat Cut 'TESCO' Letters",
                    "FCL3500 - 3500mm Flat Cut 'TESCO' Letters",
                    "FCL4200 - 4200mm Flat Cut 'TESCO' Letters",
                    "FCLE600 - 600mm Flat Cut 'EXTRA' Letters",
                    "FCLE900 - 900mm Flat Cut 'EXTRA' Letters",
                    "FCLE1200 - 1200mm Flat Cut 'EXTRA' Letters",
                    "FCLE1500 - 1500mm Flat Cut 'EXTRA' Letters",
                    "FCLE1700 - 1700mm Flat Cut 'EXTRA' Letters",
                    "FCLE2000 - 2000mm Flat Cut 'EXTRA' Letters",
                    "FCLE2500 - 2500mm Flat Cut 'EXTRA' Letters",
                    "FCLE2900 - 2900mm Flat Cut 'EXTRA' Letters",
                    "FCLE3500 - 3500mm Flat Cut 'EXTRA' Letters",
                    "FCLE4200 - 4200mm Flat Cut 'EXTRA' Letters",
                    "VL600 - 600mm Vinyl 'TESCO' Letters",
                    "VL900 - 900mm Vinyl 'TESCO' Letters",
                    "VL1200 - 1200mm Vinyl 'TESCO' Letters",
                    "VL1500 - 1500mm Vinyl 'TESCO' Letters",
                    "VL1700 - 1700mm Vinyl 'TESCO' Letters",
                    "VL2000 - 2000mm Vinyl 'TESCO' Letters",
                    "VL2500 - 2500mm Vinyl 'TESCO' Letters",
                    "VL2900 - 2900mm Vinyl 'TESCO' Letters",
                    "VL3500 - 3500mm Vinyl 'TESCO' Letters",
                    "VL4200 - 4200mm Vinyl 'TESCO' Letters",
                    "VLE600 - 600mm Vinyl 'EXTRA' Letters",
                    "VLE900 - 900mm Vinyl 'EXTRA' Letters",
                    "VLE1200 - 1200mm Vinyl 'EXTRA' Letters",
                    "VLE1500 - 1500mm Vinyl 'EXTRA' Letters",
                    "VLE1700 - 1700mm Vinyl 'EXTRA' Letters",
                    "VLE2000 - 2000mm Vinyl 'EXTRA' Letters",
                    "VLE2500 - 2500mm Vinyl 'EXTRA' Letters",
                    "VLE2900 - 2900mm Vinyl 'EXTRA' Letters",
                    "VLE3500 - 3500mm Vinyl 'EXTRA' Letters",
                    "VLE4200 - 4200mm Vinyl 'EXTRA' Letters"
                  ];
  items["PFS Canopy/Kiosk"] = [ "PC1000IC - 1000mm Blue Internal Corner Panel",
                  "PC1000 - 1000mm Short Blue Fascia Panel",
                  "PC2000 - 2000mm Medium Blue Fascia Panel",
                  "PC3000 - 3000mm Long Blue Fascia Panel",
                  "PC4000 - 4000mm Long Blue Fascia Panel",
                  "PCEXTRA - 2000mm 'EXTRA' Text Panel",
                  "PCFB - Fixing Brackets",
                  "PCLT - 2500mm Lighting/Fixing Tray",
                  "PCEC - Standard Blue External Corner",
                  "PCTK - Non-Illuminated 'TESCO' Logo Panel",
                  "PCTEK - Non-Illuminated 'EXTRA' Logo Panel",
                  "PCTESCO - 3000mm 'TESCO' Text Panel"
                ];
  items["Woodtex Bulkhead"] = [ "ASG UK 83 - Mill Finish Fixing Brackets",
                  "ASG UK 84 - Woodtex Finish Baton",
                  "ASG UK 84 EC - End Caps",
                  "TEX-TES-CP01 - Pre-Mitred Corner Section"
                ];


function fillSelect(nValue,nList){

    nList.options.length = 1;
    var curr = items[nValue];
    for (each in curr)
        {
         var nOption = document.createElement('option');
         nOption.appendChild(document.createTextNode(curr[each]));
         nOption.setAttribute("value",curr[each]);           
         nList.appendChild(nOption);
        }
}
</script>

And my form looks like this:

<select name='category_1' class="category" onchange="fillSelect(this.value,this.form['item_1'])">
                    <option value="">Select Category</option>
                    <option value="24 Hour Blips">24 Hour Blips</option>
                    <option value="Car Park Signs">Car Park Signs</option>
                    <option value="Flex Letters">Flex Letters</option>
                    <option value="Gantry Signs">Gantry Signs</option>
                    <option value="Illuminated Logo">Illuminated Logo</option>
                    <option value="Non-Illuminated Logo">Non-Illuminated Logo</option>
                    <option value="PFS Canopy/Kiosk">PFS Canopy/Kiosk</option>
                    <option value="Woodtex Bulkhead">Woodtex Bulkhead</option>
                </select>
<select name='item_1' class="items"><option value="">Select Item</option></select>

Can anyone help me?

Answer 1

That is because the Array object is extended and the for(i in array) structure actually takes every (enumerable) property of the Array object and processes it.

This includes the array element indices, but since in Javascript every method is a property and libraries often supplement the Array's prototype with enumerable methods, you also go over those methods during the loop.

It worked in the static HTML because the array only had the default JS behavior. for..in is a bad choice if you are not taking precautions.

You can check if

curr.hasOwnProperty(each)

but that would be an overkill.

Simply change the loop to:

for (each=0; each < curr.length; ++each)

and save a lot of unnecessary headache.

Edit:

Since you asked, I will add a small example to illustrate the enumerable properties and how they are reflected in for..in, but I will not go into details:

JavaScript uses prototypal inheritance. Extending is done in an object's special prototype property.

A new property can be defined in many ways, and is usually enumerable. In order to create a non-enumerable property, one has to use a special method, Object.defineProperty() and set a certain option.

Array.prototype.foo = '';

Object.defineProperty(Array.prototype, 'enumerableProperty', { value: '', enumerable: true });

Object.defineProperty(Array.prototype, 'nonEnumerableProperty', { value: '', enumerable: false });

var arr = [10,'bar'],
    i;

for(i in arr){
    console.log(i, arr.hasOwnProperty(i));
}

and the result in the console is:

0 true
1 true
foo false
enumerableProperty false

Note that:

• All of the array indices and enumerable properties/methods are listed.
• Everything except the indices is not an ownProperty.
• The nonEnumerableProperty is not iterated over.