根据表格内容创建 select 选项下拉列表

Question

下面是我的代码片段，它根据 table 上存在的数据创建了一个 select 选项下拉列表，它工作正常而不是我不想复制该选项，例如如果已经有 "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>

Answer 2

$(document).ready(function() {
  $("button").click(function() {
    var arr = [];
    $("table tr").each(function() {
      var option = $(this).find("td:nth-child(2)").text();
      if ($.inArray(option, arr) == -1) { //check if id value not exits than add it
        arr.push(option);

        $("select").append('<option  value="' + option + '">' + option + '</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>

这样试试创建一个数组。检查值是否存在于数组中，如果不存在，则将值添加到数组中，如果存在，则不添加到选项中。

更新

as @balachandar 请注意，您在 select

中关闭选项时遇到问题

Answer 3

这里是 JSFiddle 使用 .unique():

$(document).ready(function(){

      $("button").click(function(){
          var items=[], options=[];

            //Iterate all td's in second column
            $('td:nth-child(2)').each( function(){
               //add item to array
               items.push( $(this).text() );       
            });

            //restrict array to unique items
            var items = $.unique( items );

            //iterate unique array and build array of select options
            $.each( items, function(i, item){
                options.push('<option value="' + item.toLowerCase().replace(" ", "_") + '">' + item + '</option>');
            });

            //finally empty the select and append the items from the array
            $('select').empty().append( options.join() );

      });
});

Answer 4

您只需要添加一个函数来检查该值是否已存在于下拉列表中：

var optionExists = function optionExists(select, value) {
  var found = false;
  select.find('option').each(function(option) {
    if ($(this).val() === value && !found) {
      found = true;
    }

  });
  return found;
}

非常简单，您只需在添加新选项之前循环遍历下拉列表中所有现有选项来检查值。

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

      }
    });

  });
})

var optionExists = function optionExists(select, value) {
  var found = false;
  select.find('option').each(function(option) {
    if($(this).val() === value && !found){
      found = true;   
    }

  });
  return found;
}

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

根据表格内容创建 select 选项下拉列表

create a select option dropdown based on the tables content

javascript

jquery

html-select