I would like to create a select dropdown that contains all values from a column with each value only appearing once.
Is there a way to achieve this in JavaScript or jQuery assuming I have a basic HTML table and the column in question is columnA ?
-
And what exactly does a column look like ?adeneo– adeneo2013-11-21 21:29:46 +00:00Commented Nov 21, 2013 at 21:29
-
1possible duplicate of Unique values in an arrayrolfv1– rolfv12013-11-21 21:32:16 +00:00Commented Nov 21, 2013 at 21:32
Add a comment
|
5 Answers
You'd have to some checking to be sure you haven't already included a column, something like:
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
}
Comments
With plain js (no library): 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>
2 Comments
user2571510
Thanks a lot - this is great too ! I'll try both and see which one works better.
m59
@user2571510 both work fine, but there's no reason to use jQuery just for this. If you're already using jQuery, you might as well use the jQuery solution. If you're not using jQuery, use my approach. Generally, I think it is better to give answers that don't use a library if possible.
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>");
}
}
Comments
Plain Javascript, ES6, easy:
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)]
Comments
Responding to
Plain Javascript, ES6, easy:
It could be also like this:
let cells = document.querySelectorAll("td.mycell");
const values = [...cells].map((cell) => cell.textContent);
const distinct= [...new Set(values)];
