幫助javascript onchange和顯示/隱藏表格內容

Question

我想根據所選的選擇值在td標簽中顯示/隱藏div。 我無法顯示標簽文本，只能顯示文本框。 有人可以幫我嗎？

到目前為止，這是我的代碼

<script>
function toggleOther(chosen){
if (chosen == 'oth') {
  document.myform.other.style.visibility = 'visible';
} else {
  document.myform.other.style.visibility = 'hidden';
  document.myform.other.value = '';
}
}
</script>
<form name="myform">
  <tr>
    <td>
      <select name="values" size="1" onchange="toggleOther( document.myform.values.options[ document.myform.values.selectedIndex ].value );">
      <option value=" " selected="selected"> </option>
      <option value="name">Name</option>
      <option value="age">Age</option>
      <option value="oth">Other</option>
      </select>
    </td>
    <td>
      <div style="visibility:hidden">
        <label>adfdasfgsfg</label>
        <input type="text" name="other" value="" size="25" />
      </div>
    </td>
  </tr>
</form>

Answer 1

給該元素一個ID：

<div id="Other" style="visibility:hidden">

現在，您可以在代碼中輕松訪問它：

document.getElementById('Other').style.visibility = 'visible';

編輯：

這是經過更改且經過測試且可以正常工作的代碼：

<script>
function toggleOther(chosen){
if (chosen == 'oth') {
  document.getElementById('Other').style.visibility = 'visible';
} else {
  document.getElementById('Other').style.visibility = 'hidden';
  document.myform.other.value = '';
}
}
</script>
<form name="myform">
  <tr>
    <td>
      <select name="values" size="1" onchange="toggleOther( document.myform.values.options[ 

document.myform.values.selectedIndex ].value );">
      <option value=" " selected="selected"> </option>
      <option value="name">Name</option>
      <option value="age">Age</option>
      <option value="oth">Other</option>
      </select>
    </td>
    <td>
      <div id="Other" style="visibility:hidden">
        <label>adfdasfgsfg</label>
        <input type="text" name="other" value="" size="25" />
      </div>
    </td>
  </tr>
</form>

Answer 2

問題是您已將包含<div>可見性設置為hidden但是您的JavaScript只顯示了您的輸入。 （ document.myform.other.style.visibility ）

要使其工作，只需給您的<div>一個id並顯示和隱藏它即可：

// ... snip ...
function toggleOther(chosen){
var piece_to_hide = document.getElementById("otherValues");
if (chosen == 'oth') {
  piece_to_hide.style.display = 'block';
} else {
  piece_to_hide.style.display = 'none';
  document.myform.other.value = '';
}
}
// ... snip ...
  <div id="otherValues" style="display:none">
     <label>adfdasfgsfg</label>
     <input type="text" name="other" value="" size="25" />
  </div>