Question

我想创建一个包含列中所有值的选择下拉列表，每个值只出现一次。

有没有办法在JavaScript或jQuery中实现这一点，假设我有一个基本的HTML表格，并且有问题的列是columnA？

Answer 1

您必须进行一些检查，以确保您尚未包含列，例如：

function makeSelectFromColumn() {
    var arr = [];
    $("td:first").each(function() {
        if ($.inArray($(this).text(), arr) == -1)
            arr.push($(this).text());
    });

    //Create your select
    var select = $("<select />");
    for (var i = 0; i < arr.length; i++) {
        $("<option>" + arr[i] + "</option>").appendTo(select);
    }

    select.appendTo("body"); //append where you need
}

Answer 2

使用普通js（无库）：live demo here (click).

var colA = document.querySelectorAll('td:first-child'); //select the column you want

var used = []; //to check for used values
var frag = document.createDocumentFragment(); //add option elements to this
for (var i=0; i<colA.length; ++i) { //for each item in the column
  var text = colA[i].textContent; //get the text from the item
  if (used.indexOf(text) == -1) { //if the text isn't already used
    used.push(text); //store the text as used
    var option = document.createElement('option'); //create option
    option.textContent = text;
    frag.appendChild(option); //add option to frag
  }
}

var select = document.createElement('select'); //create select
select.appendChild(frag); //add options to select

document.body.appendChild(select); //put the select somewhere on the page

HTML：

<table>
  <tbody>
    <tr><td>Col A Val1</td></tr>
    <tr><td>Col A Val2</td></tr>
    <tr><td>Col A Val3</td></tr>
    <tr><td>Col A Val1</td></tr>
    <tr><td>Col A Val2</td></tr>
    <tr><td>Col A Val3</td></tr>
  </tbody>
</table>

Answer 3

function getNthColumn(n) {

   var data = [],
       i,
       yourSelect,
       unique;

   $("#yourTable tr td:nth-child("+n+")").each(function () {
        data.push($(this).text());           
   });

   // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
   // Use this function if your table is not large as the time complexity is O(n^2)
   unique = data.filter(function(item, i, arr) {
       return i == arr.indexOf(item);
   });

   yourSelect = $('#yourSelect');
   for (i = 0; i < unique.length; i += 1) {
        yourSelect.append("<option>"+unique[i]+"</option>");
   }
}

http://jsfiddle.net/xaum3/2/

Answer 4

纯Javascript ES6，简单：

const cells = [].slice.call(table.querySelectorAll('td.mycell')) //using slice to convert nodelist to array
const values = cells.map(cell => cell.textContent)
const distinct = [...new Set(values)]

在JavaScript / jQuery中从列中获取所有值而不重复

4 个答案: