时间戳

首页 > 解决方案 > 如何设置出现在下拉列表中的默认值？

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

问题描述

我已经看到了这个答案，它说要这样做：

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

标签： javascripthtmld3.jsdrop-down-menu

解决方案

当你这样做...

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属性是给定选项的布尔值。

解决方案：为 s 创建一个新选择<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>

推荐阅读