Question

我已经看到this的答案，说明这样做：

.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> s创建一个新选择：

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>

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

1 个答案: