«OnClick» приписывать DROPDOWNLIST товара

Question

я выпадающий я хочу, когда я выбор один элемент в моем раскрывающемся списке он показывает мне один PieChart что Зависит от нее, это мой код .... для этого я использовал

$("#groupe").on('click', function() { 
     $('#chart_div').toggle(); //If it is visible hide it or vice versa 

, потому что моя страница HTML это

<!-- Javascript DropDown menu --> 
    <label>Select le groupe</label> 
    <select id="groupe"> 
    <option value="">Awaiting data...</option> 
    </select> 

<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script src="{{=URL('static','js/XXXXXX/code/reporting.js')}}"></script> 

<!-- piechart --> 
<div id="reportingContainer"></div> 

Я знаю, что это неправильно.

не могли бы вы дать мне ??????

---

function populateSelectWithOptions(target, data) 
    { 
     console.log(data, typeof(data)); 
     var $select =$("#"+target); 
     $select.empty(); 
     for(var i=0; i <data.length;i++){ 
     $select.append($("<option>").attr("value", data[i]).text(data[i])); 
     } 

     $select.prop('disabled', false); 
     $select.change(function(){ 
      var e = document.getElementById("groupe"); 
      var strUser = e.options[e.selectedIndex].value; 
      //alert(strUser); 
      sendQuery(strUser) 

     }); 

     $select.trigger('change'); 

    }; 

     function sendQuery(cityName) { 

      var query = new google.visualization.Query('http://localhost:8080/XXXXXXXXXXXX/datasource?table='+cityName); 

      query.setQuery('select zone_name, sum(cost) group by zone_name'); 

      query.send(drawChart); 

     } 


     function drawChart(response) { 
      if (response.isError()) { 
      alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage()); 
      return; 
     } 
      var data = response.getDataTable(); 
      var options = {'title':'B B B B ........', 
          'width':400, 
          'height':300}; 
      var chart = new google.visualization.PieChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
     }; 

     function initialize() { 
      var $newDiv = $('<div>').attr('id','chart_div');    
      $('#reportingContainer').append($newDiv); 

      $($newDiv).hide(); 


      getTable(); 
     } 

     $("#groupe").on('click', function() { 
     $('#chart_div').toggle(); //If it is visible hide it or vice versa 
     }); 


    function getTable() { 
      $.getJSON('call/json/mytables', {}, function (response){ 
      console.log(response); 
      populateSelectWithOptions("groupe", response); 
     }) 
     } 

    getTable(); 

Answer 1

Вместо "нажмите кнопку" использовать "изменения" в вашем случае. Это срабатывает, когда пользователь сделал выбор.

Вдоль линии:

$("#groupe").change(function() { 
    $('#chart_div').toggle(); //If it is visible hide it or vice versa 
    //.. 
}); 

Чтобы получить различные диаграммы, проверьте, какой вариант был выбран в этой функции $(this).val()