如何设置出现在下拉列表中的默认值？答案

【问题标题】：How to set default value appearing in dropdown?如何设置出现在下拉列表中的默认值？
【发布时间】：2018-10-24 21:57:13
【问题描述】：

我看到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 中的第一个值仍然显示。我怎样才能实现我的目标？

【问题讨论】：

selected 是option 标签的属性
@rioV8 我尝试将 selected 替换为属性，但它仍然不起作用。
谢谢，但这仍然不适合我。我在选项标签上使用了 .property() ，但它仍然什么也没做。

标签： javascript html d3.js drop-down-menu

【解决方案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"});

&lt;script src="https://d3js.org/d3.v5.min.js"&gt;&lt;/script&gt;

【讨论】：