2012-07-31 35 views
0

我想要一個下拉菜單,如果我選擇value1我會得到幾個輸入字段,如果我選擇value2,我會得到一些其他輸入字段。所以我在網上找到了這個代碼,我試圖根據我的需要進行調整。不幸的是,它不工作,表格總是顯示。如果我不使用表格(只是純文本),代碼將起作用。更改下拉問題的內容

的Javascript

<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

<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> 
+0

你打算使用jQuery嗎? – 2012-07-31 10:19:38

回答

1

你爲什麼不給那些ID對TR元素,而不是創建div的。我試着改變一些頁面結構。有效。我將賦予div元素的id分配給它們中的tr元素,並且它工作正常。