Показать другую часть таблицы с выбором - 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> 

мне нужно, например, если выбран значение параметра ПАР, изменить содержание <tr id="second">. Различный контент для каждого выбранного значения параметра. Согласно варианту, содержание будет больше или меньше ячеек.

Пожалуйста, мне может немного помочь, чтобы увидеть, как я должен это делать.

Answer 1

Вы можете сделать это:

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

Answer 2

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

Explaination:

Приложите слушатель событий для выбора пункта с name=tournament, который прослушивает для изменения. Когда происходит изменение, обновите содержимое области #second.

Это основная концепция того, что вы просили сделать, для специфики, быть более ... конкретным.