2013-09-02 2 views
2

시작하려면 다른 입력에서 자동 채우기 드롭 다운 목록의 정적 버전을 만들었습니다.이러한 추가 값은 모두 드롭 다운 목록에 나타납니다.

괜찮 았는데, 내가 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> 

이 사람이 나를 도울 수 있습니까?

+0

모든 nValue에 대해 발생합니까? – kangoroo

+0

무슨 뜻인지 모르겠지만 첫 번째 상자에서 옵션을 선택할 때마다 발생합니다. 두 번째 상자는 필드를 채우지 만 그 아래에 추가 필드를 추가합니다. –

+0

어쩌면 배열 길이를 항목에 대해 먼저 가져온 다음 각 항목 대신 (i ++)를 통해 반복합니다. – kangoroo

답변

1

개체가 확장되고 for(i in array) 구조가 실제로 Array 개체의 (열거 가능한) 모든 속성을 사용하고 처리하기 때문입니다.

이것은 배열 요소 인덱스를 포함하지만 자바 스크립트에서는 모든 메서드가 속성이고 라이브러리가 종종 열거 형 메서드로 Array의 프로토 타입을 보완하므로 루프 도중에 이러한 메서드를 사용합니다.

배열에 기본 JS 동작 만 있기 때문에 정적 HTML에서 작동했습니다. for..in은 예방 조치를 취하지 않으면 나쁜 선택입니다. 그 잔인한 것

curr.hasOwnProperty(each) 

하지만 경우

당신은 확인할 수 있습니다.

는 단순히 루프를 변경합니다

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

불필요한 두통을 많이 저장합니다.

편집 : 당신이 질문 때문에

, 내가 열거 속성을 설명하기 위해 작은 예제를 추가하고 그들이 for..in에 반영하는 방법,하지만 세부 사항에 가지 않을 :

자바 스크립트 프로토 타입 사용 계승. 확장은 객체의 특수한 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은 반복되지 않습니다.
+0

멋지게 일했습니다. 고마워요. 나는 이유를 알 것 같아. 그러나 당신이주는 새로운 라인의 각 부분이 할 수있는 최선의 방법을 설명해 주시겠습니까? –

+0

설명이 추가되었습니다. Enjoy :) – MasterAM

+0

그래, 네가 입력 한 시간에 감사하지만 그 질문에 실제로 대답하지는 않지만 어쨌든 고맙다. –