D3.js: get value of selected option?

Question

I want to get the value of the selected option from a dropdown list, in D3.js.

<select>
<option data-graph="1">1</option>
<option value="2">2</option>
</select>

I have seen this question which explains how to get the value when the select changes:

d3.select("#myselect").on("change", change)
function change() {
    this.options[this.selectedIndex].value
}

But how can I get the selected value on page load, not when the select is changed?

score 51 · Answer 1 · edited Dec 26 '14 at 18:02

51

I found this to be the simplest:

d3.select("#objectID").node().value;

Which is the text of the selected option in the following node: <select id="objectID"></select>

Note that d3.node() is documented at https://github.com/mbostock/d3/wiki/Selections#node and the .value property of an HTMLInputElement is documented on MDN at https://developer.mozilla.org/en/docs/Web/API/HTMLInputElement.

edited Dec 26 '14 at 18:02

Mark Amery

answered Nov 22 '13 at 20:42

Moop

score 33 · Answer 2 · edited Dec 26 '14 at 18:03

33

d3.select("#objectID").property("value")

edited Dec 26 '14 at 18:03

Mark Amery

answered Mar 20 '14 at 09:09

Anish Agarwal

score 14 · Accepted Answer · edited Dec 26 '14 at 17:58

14

You don't need to use D3 to do that:

var sel = document.getElementById('myselect');
console.log(sel.options[sel.selectedIndex].value)

edited Dec 26 '14 at 17:58

Mark Amery

answered Sep 18 '13 at 23:01

Stephen Thomas

Oh yes... I guess I don't actually need D3 to do that :) – Richard Sep 18 '13 at 23:21
8

if you want to use d3: var sel = d3.select('#myselect').node() – Adam Pearce Sep 19 '13 at 02:54
1

Actually I have to change `#myselect` to just `select` in the above, for it to work. – Richard Sep 19 '13 at 09:20
@Richard Can't believe none of the highly voted answers below works for me in IE but your comment above worked for me! I have a a feeling it's an IE issue... – dragonfly02 Jan 25 '17 at 12:10

score 0 · Answer 4 · answered Jan 11 '16 at 15:38

0

I've also seen

d3.select("#objectID")[0][0].value

But I'm quite sure this is generally a bad idea...

answered Jan 11 '16 at 15:38

Azrantha

https://github.com/mbostock/d3/wiki/Selections - "However, you can still loop over elements manually if you wish: there's an each operator which invokes an arbitrary function, and selections are arrays, so elements can be accessed directly (e.g., selection[0][0])" - It seems this access method is mainly intended for looping, and, in my not-very-experienced opinion, is slightly less clear than the other answers. – Azrantha Jan 12 '16 at 12:30

4 Answers4