如何设置出现在下拉菜单中的默认值? [英] How to set default value appearing in dropdown?

问题描述

我已经看到此答案，其中说为此:

I have seen this answer which says to do this:

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

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

But this isn't working for me. I'm trying to create a simple drop down and create a default value to be the text that initially appears on the drop down. This is what I'm doing:

    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中的第一个值仍然显示出来.我如何实现我的目标?

For some reasons, the first value in cols is what still shows up. How can I accomplish my goal?

推荐答案

执行此操作时...

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

...您必须问自己:什么是下拉列表?很明显，这是D3选择，但是什么选择?

... you have to ask yourself: what is dropdown? It's a D3 selection, that's clear, but what selection?

让我们看看:

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

因此，下拉是指< select> ，而不是选项.

Therefore, dropdown refers to the <select>, not to the options.

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

On top of that, you cannot set...

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

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

解决方案:为< option> s创建一个新选择:

Solution: create a new selection for the <option>s:

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

然后:

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

其中 d ===某些默认值" 将为每个数据返回 true 或 false .

Where d === "some default value" will return true or false for each datum.

或者，您无需命名选择(但这是个好主意)，只需将该方法添加到链中即可.

Alternatively, you don't need to name the selection (but it's a good idea doing so), just add that method to the chain.

这是一个演示:

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>

这篇关于如何设置出现在下拉菜单中的默认值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！