Finding the user selected option(s) from a `multiple` drop down menu using d3?

Question

I am having trouble finding selected options when using a <select multiple> dropdown.

SO has a few discussions for finding the user selected option (not plural) from a dropdown menu: link1, link2, link3.

The major question is in the code below.

<!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>

The problem with this script is that I'm not seeing the values "Bob" and "Tom" in the array displayed in the console.

enter image description here

It would be just `selections = menu.selectAll("options:checked")`, no? — Lars Kotthoff, Aug 08 '14 at 16:28
You're selecting a group of elements. Simply printing them will print an array of arrays, not the checked options. — Mike Precup, Aug 08 '14 at 17:31
@LarsKotthoff - your suggestion is the same result as what I have above. — blehman, Aug 08 '14 at 18:16
@MikePrecup - it is indeed an array of arrays; however, nowhere (that I can find) is there an array that contains the items desired, namely ["Bob","Tom"]. — blehman, Aug 08 '14 at 18:16

score 3 · Accepted Answer · answered Aug 08 '14 at 18:41

3

The easiest way I know of to do this with d3 is to filter your selection.

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

That selection will grab all the options, and then filter out those that aren't selected.

answered Aug 08 '14 at 18:41

Mike Precup

4,148
21
41

probably a newb question, but when I console.log(this), I don't see a .selected value even though this works. @MikePrecup, can you explain the contents of `d3.select(this)` and specifically where you use `this.selected`? – blehman Aug 08 '14 at 22:18
`this` refers to different things in the two uses. The top usage refers to the `select`, since that's the object the callback is being called by, whereas the second `this` refers to the `option`. Filter iterates over the current selection, and runs the filter on each, so `this` gets me a reference to whichever `option` it's processing at the time. – Mike Precup Aug 08 '14 at 22:22
that makes sense, but what holds the .selected value? I am (probably naively) thinking of `this` as an object with a key `selected` that will return a specific value when called as in `this.selected`; however, I can not find the value named `selected`. – blehman Aug 08 '14 at 22:45
1

Take a look at [the docs for option](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option). One of the attributes for an `option` is `selected`. `this`, in the second usage, truly gives you the DOM element for the `option`, so your thinking is correct. I don't know what you're using to examine `this`, but the attribute is indeed there. Printing it out should show you that it's an `option` element, and the docs linked show that there should be a `selected` attribute. – Mike Precup Aug 08 '14 at 22:58
Hi, I was wondering if we could get an array of the options value instead of options? – shawnngtq Jul 18 '16 at 09:28

score 0 · Answer 2 · answered Aug 24 '20 at 03:24

0

Found an easier option to do this.

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

Thanks,

answered Aug 24 '20 at 03:24

Bincy

63
1
7

Finding the user selected option(s) from a `multiple` drop down menu using d3?

2 Answers2