代码之家  ›  专栏  ›  技术社区  ›  Lee Collings

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

  •  2
  • Lee Collings  · 技术社区  · 11 年前

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

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

    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 回复  |  直到 11 年前
        1
  •  1
  •   MasterAM    11 年前

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

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

    它在静态HTML中工作,因为数组只有默认的JS行为。对于如果你不采取预防措施,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 没有迭代。