来自 table 的文本字符串添加到带有 jquery 的 select 选项

Question

我 select 有一些选项：

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

和table：

<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 将文本 'option 1'、'option 2' 从 table 复制到 select 选项并得到这个：

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

来自 table 的文本字符串添加到带有 jquery 的 select 选项

Text string from table add to select option with jquery

jquery

select

html-table

option