Shows only the first option value from<select> in google chart

Question

my option I have 2 options to display in a chart...first_option & second_option

<select id="data">
  <option value="['car', 7],['jeep', 2],['taxi', 1]">first_option</option>     
  <option value="['car', 9],['taxi', 1]">second_option</option>   
</select>

<div id="chart"></div>

my chart

var data = new google.visualization.DataTable();
data.addColumn('string', 'Cartype');
data.addColumn('number', 'Amount');


var selected_option = document.getElementById('data').value;

var arr = eval("[" + selected_option + "]");

data.addRows(arr);

it always display the first_option "value" Is there a way to display both option depends on what the user click???

Answer 1

This doesn't work with multi-select, but for simple select this works!

var selected_options = document.getElementById('data'); 

//This select your to variable

selected_options.options[ selected_options.selectedIndex ].value 

// This gets selectedIndex in your options and gets value of selectedIndex option