Question

我在HTML中有以下select元素：

<div id="myselect">
    Results
    <select></select>
</div>

我用数据库中的数据填充它，如果有的话，然后我想检查它是否包含任何元素，所以我这样做：

var myselect = d3.select('#myselect select');
var r = myselect.datum();
if(r.option.length != 0) {
    ...
}

这里的问题是myselect是一个我知道只有一个元素的数组。我认为datum()是获取该值的方法，但这会使r为空。

Answer 1

您可以使用selection.empty()来确定选择是否为空。

const isEmpty = d3.selectAll("div").empty();

对于你的特殊例子，你可能想要更像这样的东西。您正在做的是检查选择是否为空，然后使用selection.node()从该选择中抓取实际的HTMLElement。

var myselect = d3.select('#myselect select');
if (!myselect.empty()) {
    var node = myselect.node();
    var options = node.options;
    if (options.length > 0) {

    }
}

datum()函数的使用方式不同，它将返回选择绑定到的数据对象。例如，如果您这样做：

d3.selectAll("div")
  .data(["A", "B", "C"])
  .enter()
  .append("div")
  .attr("class", function(d) { return d; }); // will return a letter

// Go select a div and grab the data object it's bound to
// which will return the array item "B", but this could have
// equally been a complex object
d3.select("div.B").datum();

Answer 2

您似乎正在尝试获取<select>的原始HTMLSelectElement。尝试使用.node()：

var myselect = d3.select('#myselect select');
var r = myselect.node();
if (r.options.length != 0) { // options, not option?
    ...
}

检查HTML select元素是否为空

2 个答案: