Текстовая строка из таблицы добавить, чтобы выбрать вариант с JQuery

Question

У меня есть выбор с каким-то вариантом:

<select class="mat"> 
<option value="0">mat 1</option> 
</select> 

и таблицами:

<table id="mat-table"> 
<tr> 
    <td>option 1</td> 
    <td>desc</td> 
</tr> 
<tr> 
    <td>option 2</td> 
    <td>desc</td> 
</tr> 
<tr> 
    <td>option 3</td> 
    <td>desc</td> 
</tr> 
</table> 

Я хочу с текстом JQuery копии «вариантом 1», «вариант 2 'из этой таблицы, чтобы выбрать опцию и получить это:

<select class="mat"> 
<option value="0">option 1</option> 
<option value="1">option 2</option> 
<option value="2">option 3</option> 
</select> 

Пожалуйста, помогите.

Answer 1

Попробуйте это:

$('#mat-table td:first-child').each(function(i) { 
    var $option = $('<option>', { value: i }).text(this.textContent); 
    $('.mat').append($option); 
}); 

См Fiddle

Answer 2

$(document).ready(function(){ 
 
    $('.mat').html(''); 
 
    var i = 0; 
 
    $("#mat-table tr").each(function(){ 
 
    $('.mat').append($('<option>', { 
 
     value: i, 
 
     text: $(this).find('td:nth-child(1)').html() 
 
    })); 
 
    i++; 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select class="mat"> 
 
    <option value="0">mat 1</option> 
 
</select> 
 
<table id="mat-table"> 
 
    <tr> 
 
    <td>option 1</td> 
 
    <td>desc</td> 
 
    </tr> 
 
    <tr> 
 
    <td>option 2</td> 
 
    <td>desc</td> 
 
    </tr> 
 
    <tr> 
 
    <td>option 3</td> 
 
    <td>desc</td> 
 
    </tr> 
 
</table>