Determining select/option using D3

Question

After assembling some radio buttons using D3

function build_rb() {
    let mylist = d3.range(5);
    let spans = d3.select('body')
                  .selectAll('span')
                  .data(d3.range(5))
                  .enter()
                  .append('span');
    spans.append('input')
         .attr('type', 'radio')
         .attr('name', 'rbname')
         .attr('id', d => d);
    spans.append('label')
         .html(d => ("display: " + d))
         .attr('for', d => d);
}
function get_rb() {
    let sel = d3.select('input[name="rbname"]:checked')
                .node().id;
    return sel;
}
build_rb();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

I can determine the checked radio button by calling get_rb().

If I do the same with a select/option construct

function build_so() {
    d3.select('body')
      .append('select')
      .attr('id', 'soname')
      .selectAll('option')
      .data(d3.range(5))
      .enter()
      .append('option')
      .attr('value', d => d)
      .text(d => ("display: " + d));
}
function get_so() {
    let select = document.getElementById('soname');
    let current = select.options[select.selectedIndex].value;
    return current;
}
function get_so_d3() {
    let select = d3.select('select[name="soname"]:checked');
    let current = select.node().id;
    return current;
}
build_so();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

I can find the option selected with barebone JS (get_so), but not with D3 (get_so_d3).

Why?

Related: 1, 2, 3

Coderino Javarino · Accepted Answer · 2019-06-14T18:18:26.877

3

Because your selector is wrong. :checked should be on option, not select. And you select by name attribute, yet the "soname" is defined as an id.

function build_so() {
    d3.select('body')
      .append('select')
      .attr('id', 'soname')
      .selectAll('option')
      .data(d3.range(5))
      .enter()
      .append('option')
      .attr('value', d => d)
      .text(d => ("display: " + d));
}
function get_so_d3() {
    let select = d3.select('select[id="soname"] option:checked');
    let current = select.datum();
    return current;
}
build_so();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<button onclick="console.log(get_so_d3())">console log</button>

edited Jun 14 '19 at 18:18

answered Jun 14 '19 at 18:01

Coderino Javarino

2,819
4
21
43

In the rb code we return the `int` not the displayed label. In the select/option code you return the displayed label. Can you return the `int`? – Vrokipal Jun 14 '19 at 18:15
just use `datum` on selection to retrieve its bound data item – Coderino Javarino Jun 14 '19 at 18:19

Determining select/option using D3

1 Answers1