javascript - 根据表格内容创建一个选择选项下拉列表

Question

下面是我的代码片段，它根据表格中存在的数据创建了一个选择选项下拉列表，它工作正常而不是我不想重复该选项，例如如果已经有“medicine 1 or option value medicine_1”则不要再添加，简而言之如果存在相同的选项则不要追加。有什么帮助、想法、线索、建议、建议吗？

$(document).ready(function () {
    $("button").click(function () {
        $("table tr").each(function () {
            $("select").append('<option value="' + $(this).find("td:nth-child(2)").text().toLowerCase().replace(" ", "_") + '">' + $(this).find("td:nth-child(2)").text() + '<option>');
        });

    });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
<button>create</button>
<table>
    <tr>
        <td>id 1</td>
        <td>medicine 1</td>
    </tr>
    <tr>
        <td>id 1</td>
        <td>medicine 2</td>
    </tr>
    <tr>
        <td>id 1</td>
        <td>medicine 1</td>
    </tr>
    <tr>
        <td>id 1</td>
        <td>medicine 2</td>
    </tr>
    <tr>
        <td>id 1</td>
        <td>medicine 3</td>
    </tr>
</table>

Answer 1

你可以只检查是否已经有一个具有欺骗值的选项:

$(document).ready(function() {
  $("button").click(function() {
    $("table tr").each(function() {
      var value = $(this).find("td:nth-child(2)").text().toLowerCase().replace(" ", "_");
      if ($("select").find('option[value=' + value + ']').length) return;
      $("select").append('<option value="' + value + '">' + $(this).find("td:nth-child(2)").text() + '</option>');
    });
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select></select>
<button>create</button>
<table>
  <tr>
    <td>id 1</td>
    <td>medicine 1</td>
  </tr>
  <tr>
    <td>id 1</td>
    <td>medicine 2</td>
  </tr>
  <tr>
    <td>id 1</td>
    <td>medicine 1</td>
  </tr>
  <tr>
    <td>id 1</td>
    <td>medicine 2</td>
  </tr>
  <tr>
    <td>id 1</td>
    <td>medicine 3</td>
  </tr>
</table>