如何设置下拉列表中显示的默认值?

Question

我看到过这个答案，它说要这样做：

.property("selected", function(d){ return d === defaultOptionName; })

但这对我不起作用。我正在尝试创建一个简单的下拉列表并创建一个默认值作为最初出现在下拉列表中的文本。这就是我正在做的：

var dropdown = d3.select("#dropDown")
.insert("select", "svg")
.attr('id', 'dropDownId')
.on("change", dropdownChange);
dropdown.selectAll("option")
.data(cols)
.enter().append("option")
.attr("value", function (d) { return d; })
.text(function (d) {
return d;
});
dropdown.property("selected", "some default value");

出于某些原因，cols 中的第一个值仍然显示。 如何实现我的目标？

Answer 1

当你这样做时...

dropdown.property("selected", "some default value");

。你必须问自己：什么是dropdown？这是D3选择，这很清楚，但是什么选择呢？

我看看：

var dropdown = d3.select("#dropDown")
.insert("select", "svg")
//etc...

因此，dropdown指的是<select>，而不是选项。

最重要的是，您无法设置...

dropdown.property("selected", "some default value");

selected属性是给定选项的布尔值。

解决方案：为<option>创建新选择：

var options = dropdown.selectAll("option")
.data(cols)
.enter()
//etc...

然后：

options.property("selected", function(d){
return d === "some default value");
});

其中d === "some default value"将返回每个基准面的true或false。

或者，您不需要命名选择(但这样做是个好主意(，只需将该方法添加到链中即可。

这是一个演示：

var cols = ["foo", "bar", "baz", "foobar", "foobaz"]
var dropdown = d3.select("body")
.append("select")
.attr('id', 'dropDownId');
var options = dropdown.selectAll("option")
.data(cols)
.enter()
.append("option")
.attr("value", function(d) {
return d;
})
.text(function(d) {
return d;
});
options.property("selected", function(d){return d === "foobar"});

<script src="https://d3js.org/d3.v5.min.js"></script>