2

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

这工作得很好，但是当我把它放到一个 joomla 网站中，并把所有的头标签放进去时，我让它正常工作，但是在第二个下拉字段中，我得到了每个项目的额外值。

在此处输入图像描述

我用于头部的代码是：

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

谁能帮我？

4

1 回答 1

1

那是因为Array对象是扩展的，并且for(i in array)结构实际上获取了 Array 对象的每个（可枚举）属性并对其进行处理。

这包括数组元素索引，但由于在 Javascript 中每个方法都是一个属性，并且库通常用可枚举的方法来补充数组的原型，因此您还可以在循环期间查看这些方法。

它在静态 HTML 中工作，因为该数组只有默认的 JS 行为。如果您不采取预防措施，for..in 是一个糟糕的选择。

你可以检查是否

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没有迭代。
于 2013-09-02T10:13:09.727 回答