How to get access to the selected element?

问题

i use d3.js and i created a "option" window, that allows me to choose between the index i of some elements of let's say an array with the length of 4 elements. The user Andrew Reid helped with this code in another thread, so all credits to him:

var data = [10,20,30,40];

var color = d3.schemeCategory10; // color array built in

//// Add the select and options:
var select = d3.select('body')
  .append('select')
  .on('change',function() { update(this.value) });

var start = select.append('option')
  .html("select: ");

var options = select.selectAll('.option')
  .data(data)
  .enter()
  .append('option')
  .attr('class','option')
  .attr('value',function(d,i) { return i; })
  .html(function(d,i) { return i; });



//// Add the circles (and svg)
var svg = d3.selectAll('body')
  .append('svg')
  .attr('width',500)
  .attr('height',200);

var circles = svg.selectAll('circle')
  .data(data)
  .enter()
  .append('circle')
  .attr('cx',function(d,i) { return i * 30 + 50; })
  .attr('cy',50)
  .attr('r',10)
  .attr('fill',function(d,i) { return color[i]; });


// Update everything:
function update(i) {
  data.splice(i,1); // remove that element.

  // Update and remove option from the select menu:
  options.data(data).exit().remove();

  // Remove that circle:
  circles.data(data).exit().remove(); 

  circles.attr('cx',function(d,i) { return i * 30 + 50; })
    .attr('fill',function(d,i) { return color[i]; });

  // reset the select menu:
  start.property('selected','selected');
}

With the help of the line .html(function(d,i) { return i; }); the "option" window shows up the indexes and allows me to click on it.

My goal :

For example the "option" window shows up the numbers of the indexes: 0, 1, 2, 3. Now i click on the index "2" and i want to use that index "2" in other functions. My question is, how can i save that clicked number in an variable a and use this variable for example in a splice function:

data.splice(i, a)

In the code currently the splice function is data.splice(i,1).

Thanks for the help.

回答1:

You can pass the option text to your update function from your onchange function as:

this.options[this.selectedIndex].text

So you'd end up with:

var select = d3.select('body')
  .append('select')
  .on('change',function() { update(this.value, this.options[this.selectedIndex].text) }); // note: since you are setting value equal to the index, you can also use this.value instead of this.selectedIndex

function update(i, a) {
  data.splice(i,a);
  ...
}

How this works: in your code you use d3 to append an HTML select element (Select object) with several HTML option elements (Option object) in it.

Then on the select element, the onchange function (which is a standard event of the select element) then passes the select element to its function handler, so in that function this represents the actual select element, and therefore this.value (Select value property) corresponds to the value of the select element (i.e. the value of the currently selected option in the select element).

The options property of the select element, i.e. this.options (Select options collection), gets you a list of all of the option elements within that select. Using the selectedIndex property of the select element, i.e. this.selectedIndex (Select selectedIndex property), you can grab the currently selected option element from the list as this.options[this.selectedIndex].

Since the this.options collection is a list of Option elements (Option object), to get the actual text of that option you can use .text on it. And that's how you end up with this.options[this.selectedIndex].text.

来源：https://stackoverflow.com/questions/42741379/how-to-get-access-to-the-selected-element

标签

javascript

arrays

variables

d3.js

options