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());
});

用select - javascript显示表的不同部分

2 个答案: