0

私が作成しているテーブルには、次のような「選択」があります。

<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">。選択したオプション値ごとに異なる内容。オプションに応じて、内容はより多くのまたはより少ないセルになります。

私がしなければならない方法を見るために私を少し案内してください。

4

2 に答える 2

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

説明:

name=tournament変更をリッスンする選択項目にイベント リスナーをアタッチします。変更が発生した場合は、領域の内容を更新します#second。

これは、あなたが依頼したことの基本的な概念です。詳細については、より具体的にしてください。

于 2012-04-16T21:43:44.567 に答える
0

あなたはこれを行うことができます：

<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());
});
于 2012-04-16T21:46:12.777 に答える