下拉列表中出现的所有这些额外值是什么?

时间:2013-09-02 09:36:06

标签: javascript joomla auto-populate

首先,我从另一个输入创建了一个自动填充下拉列表的静态版本。

这很好用,但是当我把它放入一个joomla网站,然后把所有的head标签放进去的时候,我就让它按原样运行,但是在第二个下拉字段中我每个都得到一大堆额外的值项目

enter image description here

我正在使用的代码是:

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

我的表格看起来像这样:

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

任何人都可以帮助我吗?

1 个答案:

答案 0 :(得分:1)

这是因为扩展了Array对象,for(i in array)结构实际上接受了Array对象的每个(可枚举)属性并对其进行处理。

这包括数组元素索引,但由于在Javascript中每个方法都是一个属性,并且库通常用可枚举的方法补充Array的原型,所以你也可以在循环期间检查这些方法。

它在静态HTML中起作用,因为该数组只有默认的JS行为。如果你没有采取预防措施,那么......是不错的选择。

您可以查看是否

curr.hasOwnProperty(each)

但这可能是一种矫枉过正。

只需将循环更改为:

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

并且避免了许多不必要的头痛。

修改

既然你问过,我会添加一个小例子来说明可枚举的属性以及它们在for..in中的反映方式,但我不会详细介绍:

JavaScript使用原型继承。扩展是在对象的特殊prototype属性中完成的。

可以通过多种方式定义新属性,通常为enumerable。 为了创建不可枚举的属性,必须使用特殊方法Object.defineProperty()并设置某个选项。

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

并且控制台中的结果是:

0 true
1 true
foo false
enumerableProperty false

请注意:

  • 列出了所有数组索引和可枚举属性/方法。
  • 除索引之外的所有内容都不是ownProperty
  • nonEnumerableProperty未迭代过来。