javascript - 使用选择显示表格的不同部分 - javascript

Question

在我正在制作的表格中，我有一个像这样的“选择”：

<table>
       <tr id="first">
           <td>
               <select name="tournament">
                        <option value="">...</option>
                        <option value="INDIVIDUAL">INDIVIDUAL</option>
                        <option value="COUPLES">COUPLES</option>
                        <option value="TEAMS">TEAMS</option>
                </select>
          </td>
     </tr>
     <tr id="second">
          <td>
                ....Content....
          </td>
     </tr>
</table>

例如，如果选择了选项值 COUPLES，我需要更改<tr id="second">. 选择的每个选项值都有不同的内容。根据选项，内容将是更多或更少的单元格。

请指导我看看我该怎么做。

Answer 1

$('#first').on('change','[name="tournament"]', function(){
    $('#second td').html('my new content');
});

解释：

将事件侦听器附加到用于name=tournament侦听更改的选择项。当发生变化时，更新#second区域的内容。

这是您要求做的事情的基本概念，具体而言，更...具体。

Answer 2

你可以这样做：

<table>
       <tr id="first">
           <td>
               <select name="tournament">
                        <option value="">...</option>
                        <option value="INDIVIDUAL">INDIVIDUAL</option>
                        <option value="COUPLES">COUPLES</option>
                        <option value="TEAMS">TEAMS</option>
                </select>
          </td>
     </tr>
     <tr id="second">
          <td>
                ....Content....
          </td>
     </tr>
</table>

<div style="display:none">
  <div id="INDIVIDUAL">content1</div>
  <div id="COUPLES">content1</div>
  <div id="TEAMS">content1</div>
</div>

$('select[name=tournament]').change(function() {
  $('#second td').html($('#' + $(this).val()).clone());
});