0

我有下拉列表，我希望当我在下拉列表中选择一个元素时，它会显示一个依赖于它的饼图，这是我的代码....为此我使用

$("#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();
4

1 回答 1

0

而不是“点击”在您的活动中使用“更改”。这将在用户做出选择时触发。

沿着：

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

要获得不同的图表，请检查在此功能中选择了哪个选项$(this).val()

于 2013-07-29T15:56:23.890 回答