Question

In a table I’m making I have a “select” like this:

<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>

I need for example if the option value COUPLES is selected, change the content of <tr id="second">. A different content for each option value selected. The content would be more or fewer cells, according to option.

Please could guide me a bit to see how I have to do.

Answer 1

You could do this:

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