使用 d3 从“多个”下拉菜单中查找用户选择的选项？答案

【问题标题】：Finding the user selected option(s) from a `multiple` drop down menu using d3?使用 d3 从“多个”下拉菜单中查找用户选择的选项？
【发布时间】：2014-08-08 16:11:18
【问题描述】：

我在使用<select multiple> 下拉菜单时无法找到选定的选项。

SO 对从下拉菜单中查找用户选择的选项（不是复数）进行了一些讨论：link1、link2、link3。

主要问题在下面的代码中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div>
            <select multiple id="menu">
            </select>
        </div>
        <script>
            var some_array=["Bob","Tom"]
            var menu = d3.selectAll("#menu")

            menu.selectAll("option")
                .data(some_array)
                .enter()
                .append("option")
                .attr("value", function(d) { return d; })
                .text(function(d) { return d; }); 

            menu.on("change",function(event) {
                //HOW CAN I GET THE OPTION(S) THAT THE USER HAS SELECTED?
                //BEST GUESS:
                selections=d3.select(this).selectAll("options:checked")
                console.log(selections) 
            })
        </script>
    </body>
</html>

这个脚本的问题是我没有看到控制台中显示的数组中的值“Bob”和“Tom”。

【问题讨论】：

只是selections = menu.selectAll("options:checked")，不是吗？
您正在选择一组元素。简单地打印它们将打印一个数组，而不是选中的选项。
@LarsKotthoff - 你的建议与我上面的结果相同。
@MikePrecup - 它确实是一个数组数组；但是，没有任何地方（我能找到）包含所需项目的数组，即 ["Bob","Tom"]。

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

【解决方案1】：

我知道使用 d3 执行此操作的最简单方法是过滤您的选择。

d3.select(this)
    .selectAll("option")
    .filter(function (d, i) { 
        return this.selected; 
    });

该选择将抓取所有选项，然后过滤掉未选择的选项。

【讨论】：

可能是一个新问题，但是当我使用 console.log(this) 时，即使这有效，我也看不到 .selected 值。 @MikePrecup，你能解释一下d3.select(this) 的内容，具体是在哪里使用this.selected吗？
this 在两种用途中指的是不同的东西。最高用法是指select，因为这是调用回调的对象，而第二个this 指的是option。过滤器迭代当前选择，并在每个选择上运行过滤器，因此this 让我获得了对它当时正在处理的option 的引用。
这是有道理的，但是 .selected 值是什么？我（可能天真地）认为this 是一个带有selected 键的对象，当在this.selected 中调用时将返回一个特定值；但是，我找不到名为 selected 的值。
看看the docs for option。 option 的属性之一是selected。 this，在第二种用法中，确实给了你option的DOM元素，所以你的想法是正确的。我不知道您使用什么来检查this，但该属性确实存在。打印出来应该会显示它是一个 option 元素，并且链接的文档显示应该有一个 selected 属性。
嗨，我想知道我们是否可以得到一个选项值数组而不是选项？

【解决方案2】：

找到了一个更简单的选择。

    options = []
    for (var option of d3.select('#menu').property("selectedOptions")){
        options.push(option.value)
    }

谢谢，

【讨论】：