javascript - HTML/jQuery 显示和隐藏表格行

Question

我有一个用作联系表单的表格，其内容将根据下拉菜单进行更改。

这是我的 table :

    <table border="1">
        <tr>
            <th colspan="2">Contact Details</th>
        </tr>
        <tr>
            <td>Company Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Name:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Email:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>Company Representative Mobile Number:</td>
            <td><input type="text" /></td>
        </tr>
        <tr>
            <td>
                Contact Type:
            </td>
            <td>
                <select name="contactSelect" id="contactSelect" onchange="changeVal();"> <!-- Function showHide Show work on table elements -->
                    <option value="default" selected>Pelease select ...</option> <!-- Hide all 4 rows below -->
                    <option value="General" id="cat2">General Inquiry</option> <!-- Shows Option 1 Row -->
                    <option value="Feedback" id="cat3">Feedback</option> <!-- Shows Option 2 Row -->
                    <option value="Complains">Complains</option> <!-- Shows Option 3 Row -->
                    <option value="Requests">New Requests</option> <!-- Shows Option 4 Row -->
            </td>
        </tr>
        <tr> <!-- Header from contactSelect-->
            <th colspan="2" id="myHeader" name="myHeader" value="text">text</th>
        </tr>
        <tr> <!-- Option 1 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 2 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 3 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- Option 4 -->
            <td></td>
            <td></td>
        </tr>
        <tr> <!-- This is a temp row to be deleted -->
                <td>Selected Value:</td>
                <td><input type="text" name="test" id="test" /></td>
        </tr>
    </table>

对于 jQuery，我不知道如何更改 dropbox 菜单下方行的文本。

    <script>
        function changeVal() {
            document.getElementById('myHeader').html=document.getElementById('contactSelect').value;
            $('#myHeader').text(document.getElementById('contactSelect').value);
            alert(document.getElementById('myHeader').text);
            alert(document.getElementById('contactSelect').value);
        }
    </script>

如何显示/隐藏行

Answer 1

存在语法错误，因为您无法在这一行的 dom 节点上应用 jQuery 方法:

document.getElementById('myHeader').html=document.getElementById('contactSelect').value;
 //------------this cause in error---^^^^

您可以更改标记，就像将选择值作为类/ID 添加到相应的 tr 中一样:

function changeVal() {

  if (this.value != 'default') {
    $(this).closest('tr').nextAll('.row').hide();
    $('.' + this.value).show();
  } else {
    $('.row').show();
  }
  $('#myHeader').html(this.value).toggle(this.value != 'default'); // use here to hidenshow
}

  $('#contactSelect').change(changeVal).trigger('change'); // <---and you need to trigger it on page load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th colspan="2">Contact Details</th>
  </tr>
  <tr>
    <td>Company Name:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>Company Representative Name:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>Company Representative Email:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>Company Representative Mobile Number:</td>
    <td>
      <input type="text" />
    </td>
  </tr>
  <tr>
    <td>
      Contact Type:
    </td>
    <td>
      <select name="contactSelect" id="contactSelect">
        <!-- Function showHide Show work on table elements -->
        <option value="default" selected>Pelease select ...</option>
        <!-- Hide all 4 rows below -->
        <option value="General" id="cat2">General Inquiry</option>
        <!-- Shows Option 1 Row -->
        <option value="Feedback" id="cat3">Feedback</option>
        <!-- Shows Option 2 Row -->
        <option value="Complains">Complains</option>
        <!-- Shows Option 3 Row -->
        <option value="Requests">New Requests</option>
        <!-- Shows Option 4 Row -->
      </select>
    </td>
  </tr>
  <tr>
    <!-- Header from contactSelect-->
    <th colspan="2" id="myHeader" name="myHeader" value="text">text</th>
  </tr>
  <tr>
    <!-- Option 1 -->
    <td></td>
    <tr class='row General'>
      <!-- Option 1 -->
      <td>General</td>
      <td>General</td>
    </tr>
    <tr class='row Feedback'>
      <!-- Option 2 -->
      <td>Feedback</td>
      <td>Feedback</td>
    </tr>
    <tr class='row Complains'>
      <!-- Option 3 -->
      <td>Complains</td>
      <td>Complains</td>
    </tr>
    <tr class='row Requests'>
      <!-- Option 4 -->
      <td>Requests</td>
      <td>Requests</td>
    </tr>
    <td>Selected Value:</td>
    <td>
      <input type="text" name="test" id="test" />
    </td>
  </tr>
</table>