Set the value of a <select> element in D3?

Question

How can I set the value of a <select> element, using D3.js?

I'm trying this:

d3.select('#myselect').attr('value', 'France');

But it isn't working.

JSFiddle here: http://jsfiddle.net/06z9tnzs/

Answer 1

You need to use property instead of attr for setting the value.

d3.select('#myselect').property('value', 'France');

From the d3 docs:

Some HTML elements have special properties that are not addressable using standard attributes or styles. For example, form text fields have a value string property, and checkboxes have a checked boolean property. You can use the property operator to get or set these properties, or any other addressable field on the underlying element, such as className.

https://github.com/mbostock/d3/wiki/Selections#property

Albert's comments are also correct regarding your JSFiddle missing the d3.js reference and not specifying the id of "myselect" on the select element.