드롭 다운 문제에 대한 콘텐츠 변경

Question

value1을 선택하면 두 개의 입력란이 표시되고 value2을 선택하면 다른 입력란이 나타납니다. 그래서이 코드는 온라인에서 발견되었으며, 필자는이를 필자의 필요에 맞게 조정하려고 노력하고있다. 불행히도 그것은 작동하지 않습니다, 테이블은 항상 표시됩니다. 테이블 (보통 텍스트)로 작업하지 않으면 코드가 작동합니다.

자바 스크립트

<script type='text/javascript' src='http://jsfiddle.net/js/lib/mootools-core-1.4.5-nocompat.js'></script> 
<script type='text/javascript'> 

function showForm(id) { 
    document.getElementById('submitForm').style.display = "block"; 
    if (id == 0) { 
     document.getElementById('submitForm').style.display = "none"; 
    } 
    for (var i = 1; i < 4; i++) { 
     if (i == id) { 
      document.getElementById(i).style.display = 'block'; 
     } else { 
      document.getElementById(i).style.display = 'none'; 
     } 
    } 
} 
</script> 

HTML은 DIV의의를 만드는 대신 요소를 그럴 필요하는 그 아이디의를 제공 해달라고 왜

<table> 
     <tr> 
      <td>Selecteer uw materiaal: </td> 
      <td> 
      <select id="dropdownMenu" name="dropdownMenu" onchange="javascript: showForm(document.getElementById('dropdownMenu').value);"> 
       <option value="0">Choose an option</option> 
       <option value="1">Option 1</option> 
       <option value="2">Option 2</option> 
       <option value="3">Other</option> 
      </select></td> 
     </tr> 
    <div id="1" style="display: none;"> 
    <tr> 
     <td>Aantal videobanden: </td> 
     <td><input type="text" name="aantalVideo" value="" /></td> 
    </tr> 
    <tr> 
     <td>Geschatte speelduur (in minuten): </td> 
     <td><input type="text" name="duurVideo" value="" /></td> 
    </tr> 
    </div><!-- /1 --> 
    <div id="2" style="display: none;"> 
    <tr> 
     <td>Aantal spoelen: </td> 
     <td><input type="text" name="aantalSpoelen" value="" /></td> 
    </tr> 
    <tr> 
     <td>Geschatte speelduur (in minuten): </td> 
     <td><input type="text" name="duurSpoelen" value="" /></td> 
    </tr>  
    </div><!-- /2 --> 
    <div id="3" style="display: none;"> 
    <tr> 
     <td>&nbsp;</td> 
     <td>Overig</td> 
    </tr> 
    </div><!-- /3 --> 
    <div id="submitForm" style="display: none;"> 
    <tr> 
     <td>&nbsp;</td> 
     <td><input value=" Order aanmaken " type="submit"></td> 
    </tr> 
    </div><!-- /submitForm --> 
    </table> 

Answer 1

. 페이지 구조의 일부를 변경해 보았습니다. 그것은 효과가 있었다. div 엘리먼트에 주어진 id를 그들 안에있는 tr 엘리먼트에 할당하면 효과가있었습니다.