根據表格內容創建選擇選項下拉菜單

Question

下面是我的代碼段，它基於表中存在的數據創建一個選擇選項下拉列表，它工作正常，而不是我不想重復該選項，例如，如果已經有“ medicine 1或選項值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

您只需要添加一個函數來檢查此值是否已存在於下拉列表中：

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> 

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> 

像這樣嘗試創建一個數組。 如果不將值添加到數組中，則檢查該值是否存在於數組中；如果不存在，則將其添加到選項中。

UPDATE

如@balachandar所示，您在關閉select中的選項時遇到問題

Answer 4

這是使用.unique（）的JSFiddle ：

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

      });
});