Getting same value from different select option

Question

Here is my d3 js graph code in which I am appending two different select option which give me same value. I think two select option are overlapping to each other or there is problem in my html code.

<div id="chart" style="width:100%;height:100%;padding:0">
  <div>
    <select id="select-list">
      <option value="Line">Line</option> 
      <option value="Bar">Bar</option>
      <option value="Area">Area</option>
    </select>
  </div>
  <div id="noDataMsg" style="text-align: center;display:none">
    <h5> No Data Available For This Period </h5>
  </div>
</div>

Above here is html code in which i am appending two select option in div with id 'chart'.And below here is the d3 js graph code

var all_data = [{
  'name': 'Daily',
  'data': day_data
}, {
  'name': 'Weekly',
  'data': week_data
}, {
  'name': 'Monthly',
  'data': month_data
}, {
  'name': 'Quartely',
  'data': quater_data
}, {
  'name': 'HalfYearly',
  'data': halfyearly_data
}, {
  'name': 'Yearly',
  'data': yearly_data
}];

var select = d3.select("#chart")
  .append('select')
  .attr('class', 'select')
  .on('change', onchange)

var options = select
  .selectAll('option')
  .data(all_data).enter()
  .append('option')
  .attr("value", function(d) {
    d.data
  })
  .text(function(d) {
    return d.name
  });

function onchange() {
  var section = d3.select('select').property('value');
  var GraphType = jq('#select-list').val();
}

In above code I am getting same value of different select option in onChange function(ie value of section and Graph type is same). I don't know why?

Answer 1

The problem appears to be that

 d3.select('select')

selects the first <select> element on the page, which happens to be the one with ID select-list , and hence the same one that jq("#select-list") selects.

You may have meant to write

  var section = select.property('value');

given that your local variable select has a D3 selection containing the second <select> element. Alternatively, as this <select> has the class select , you could use the following (note the . in '.select' ):

  var section = d3.select('.select').property('value');

Answer 2

The problem that i am facing is due to my silly mistake because i am forgetting to differentiate between two select option with their id and class

First with id

 <select id="select-list">

Second with class

var select = d3.select("#chart")
  .append('select')
  .attr('class', 'select')
  .on('change', onchange)

That appear like below in my code

 <select class="select">

The problem that i am facing with this code shown below

 var section = d3.select('select').property('value');
  var GraphType = jq('#select-list').val();

The only correction that i have to use to differentiate between class and id is like that

  var section = d3.select('.select').property('value');
      var GraphType = jq('#select-list').val();