title: Finding the user selected option(s) from a `multiple` drop down menu using d3?
body: <p>I am having trouble finding selected options when using a <code>&lt;select multiple&gt;</code> dropdown. </p>
  
  <p>SO has a few discussions for finding the user selected option (not plural) from a dropdown menu: <a href="https://stackoverflow.com/questions/16611541/return-data-based-on-dropdown-menu">link1</a>, <a href="https://stackoverflow.com/questions/11903709/adding-drop-down-menu-using-d3-js">link2</a>, <a href="https://stackoverflow.com/questions/18883675/d3-js-get-value-of-selected-option">link3</a>. </p>
  
  <p>The major question is in the code below.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;script src="http://d3js.org/d3.v3.min.js"&gt;&lt;/script&gt;
          &lt;style&gt;
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div&gt;
              &lt;select multiple id="menu"&gt;
              &lt;/select&gt;
          &lt;/div&gt;
          &lt;script&gt;
              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) 
              })
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>The problem with this script is that I'm not seeing the values "Bob" and "Tom" in the array displayed in the console.</p>
  
  <p><img src="https://i.stack.imgur.com/cwG5H.png" alt="enter image description here"> </p>