我有下拉菜单,我希望当我在下拉列表中选择一个元素时,它会显示一个依赖于它的饼图,这是我的代码.... 为此,我用了
$("#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();
答案 0 :(得分:0)
而不是“点击”在您的活动中使用“更改”。这将在用户进行选择时触发。
遵循:
$("#groupe").change( function () {
$('#chart_div').toggle(); //If it is visible hide it or vice versa
//..
});
要获取不同的图表,请使用$(this).val()