首先,我从另一个输入创建了一个自动填充下拉列表的静态版本。
这很好用,但是当我把它放入一个joomla网站,然后把所有的head标签放进去的时候,我就让它按原样运行,但是在第二个下拉字段中我每个都得到一大堆额外的值项目
我正在使用的代码是:
<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>
任何人都可以帮助我吗?
答案 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
未迭代过来。