Chrome 및 Firefox에 '기타'옵션이 표시되지 않는 선택 상자

Question

선택 상자에 기타 옵션 용 스크립트가 있습니다.

IE에서는 제대로 작동하지만 크롬이나 파이어 폭스에서는 작동하지 않습니다.

다음은 스크립트 및 양식입니다.

<SCRIPT TYPE="text/javascript"> 
    function toggleField(val) { 
     var o = document.getElementById('other'); 
     var o1 = document.getElementById('other1'); 
     var opt = document.getElementById('i_skate'); 
     var opt1 = document.getElementById('my-style'); 
     (opt.options[opt.length-1].selected)? o.style.display = 'block' : o.style.display = 'none'; 
     (opt1.options[opt1.length-1].selected)? o1.style.display = 'block' : o1.style.display = 'none'; 
    } 
</SCRIPT> 


<SELECT NAME="i_skate" SIZE="1" ONCHANGE="toggleField(this.value);"> 
    <OPTION VALUE="Just a Fan">Just a Fan</OPTION> 
    <OPTION VALUE="Everyday">Everyday</OPTION> 
    <OPTION VALUE="Few times a Week">Few times a Week</OPTION> 
    <OPTION VALUE="Few times a Month">Few times a Month</OPTION> 
    <OPTION VALUE="">Other</OPTION> 
</SELECT><INPUT TYPE="TEXT" NAME="i_skate" ID="other" STYLE="display: none;" SIZE="20"> 

<SELECT NAME="my-style" SIZE="1" ONCHANGE="toggleField(this.value);"> 
    <OPTION VALUE="Street Skate">Street Skate</OPTION> 
    <OPTION VALUE="Downhill">Downhill</OPTION> 
    <OPTION VALUE="Freestyle">Freestyle</OPTION> 
    <OPTION VALUE="Pools-Bowls">Pools-Bowls</OPTION> 
    <OPTION VALUE="Vert Halfpipe">Vert Halfpipe</OPTION> 
    <OPTION VALUE="Park">Park</OPTION> 
    <OPTION VALUE="Mini Ramp">Mini Ramp</OPTION> 
    <OPTION VALUE="">Other1</OPTION> 
</SELECT> 
<INPUT TYPE="TEXT" NAME="my-style" ID="other1" STYLE="display: none;" SIZE="20"> 

누군가가 이것을보고 내가 무엇을 놓쳤는 지 말해 줄 수 있습니까?

미리 감사드립니다.

Answer 1

참조하는 ID가없는 요소로 getElementById를 사용하려고하지만 opt 및 opt1 변수에서 이름 대신 getElementById를 사용하려고합니다. 예를 들어, var opt = document.getElementById('i_skate'); 줄에는 ID가 i_skate 인 요소가 없지만 이름이 i_skate 인 요소가 있습니다. 이제 해당 요소의 ID를 변경하고 문제를 해결하거나 JavaScript를 변경하여 (아래에서와 같이) var opt = document.getElementsByName('i_skate'); 대신 getElementsByName을 사용할 수 있습니다.

getElementsByName은 getElementById와 약간 다릅니다. getElementById는 하나의 요소 (있는 경우) 만 반환하고 getElementsByName은 둘 이상의 요소를 반환 할 수 있습니다. 이 경우 첫 번째 요소는 opt가 아니라 opt [0]으로 참조해야합니다.

시도 :

function toggleField(val) { 
    var o = document.getElementById('other'); 
    var o1 = document.getElementById('other1'); 
    var opt = document.getElementsByName('i_skate'); 
    var opt1 = document.getElementsByName('my-style'); 
    (opt[0].options[opt[0].length - 1].selected) ? o.style.display = 'block' : o.style.display = 'none'; 
    (opt1[0].options[opt1[0].length - 1].selected) ? o1.style.display = 'block' : o1.style.display = 'none'; 
}​ 

jsFiddle example.

Answer 2

ID가없는 항목에 대해 getElementByID()를 사용 중이면 다른 이름으로 이름을 설정했습니다. 크롬에서 작동하는 고정 코드에 대해서는 여기를 참조하십시오. http://jsfiddle.net/zTwmb/5/