如何设置出现在下拉菜单中的默认值？

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>