Question

下面是我的代码段，根据表格中的数据创建一个选择选项下拉列表，它工作正常，我想不要复制选项，例如如果已经有“药物1或选项值药物_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

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

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

  });
  return found;
}

非常简单，您只需要在下拉列表中循环浏览所有existant选项来检查值，然后再添加新选项。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

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

<强> 更新

@balachandar 注意到您在选择

中关闭选项时遇到问题

Answer 4

此处使用 .unique（） JSFiddle {/ 3}}

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

      });
});

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

4 个答案: