Php Chart.js jQuery下拉列表选择的值

你好：）（我是新手，在工作中学习）

我使用Chart.js、jQuery和PostgreSQL

目前我有一个直接链接到PostgreSQL数据库的条形图

我想添加一个下拉列表，允许用户选择一个“区域”，它将动态更新图表

每个“区域”都有不同的变量：人口、工资（英语中的雇员人数）等

这里是PHP

<?php

$dbconn = pg_connect("")
or die('Erreur de connexion'.pg_last_error());

$query = "SELECT id, zone_nom, zone_pop, zone_salaries FROM table";
$result = pg_query($query) or die('Query failed: ' . pg_last_error());

$array = array();
while ($row = pg_fetch_array($result, null, PGSQL_ASSOC)) {
    $array[] = $row;
}

$data=json_encode($array);
echo $data;

pg_free_result($result);

pg_close($dbconn);

?>

然后，我生成一个由我的表动态填充的下拉列表

但是我被困在如何传递选定的值上​​在图表中（然后确保根据下拉列表中的选择刷新图表）

我正在寻找，但目前找不到解决方案（可能不是很复杂）

---

提前感谢您的帮助

您可以使用以下下拉菜单中的“更改事件处理程序”功能来完成此操作

$("#zone-select").change(function() {
   var nom = $("#zone-select option:selected").text(); // name of selected option
   var index = zoneNom.indexOf(nom);
   var new_labels = [zoneNom[index]];
   var new_data1 = [zonePop[index]];
   var new_data2 = [zoneSalaries[index]];
   barGraph.data.labels = new_labels;
   barGraph.data.datasets[0].data = new_data1;
   barGraph.data.datasets[1].data = new_data2;
   barGraph.update(); // update chart
});

如果您希望默认选择第一个选项，请使用

$("#zone-select").val(zonePop[0]).trigger('change');

工作示例

功能区（）{
$（“#区域选择”）.empty（）；
$（“#区域选择”）。附加（“收费”）；
$.ajax({
键入：“获取”，
url:“https://istack.000webhostapp.com/json/t9.json",
数据类型：“json”，
成功：功能（数据）{
//console.log（数据）
$（“#区域选择”）.empty（）；
$（“#区域选择”）。追加（“--select区域--”）；
$。每个（数据、功能（i、项）{
$（“#区域选择”）.append（“”+数据[i]。区域名称+“”）；
});
$（“#区域选择”）.change（函数（）{
var nom=$（“#区域选择选项：选定”）.text（）；//选定选项的名称
var指数=zoneNom.indexOf（nom）；
var new_labels=[zoneNom[index]；
var new_data1=[zonePop[index]]；
var new_data2=[zoneSalaries[指数]；
barGraph.data.labels=新的_标签；
barGraph.data.datasets[0]。data=new_data1；
barGraph.data.datasets[1]。data=new_data2；
barGraph.update（）；//更新图表
});
var zoneNom=[]；
var zonePop=[]；
var zoneSalaries=[]；
用于（数据中的var i）{
推送（数据[i].zoneNom）；
推送（数据[i].zonePop）；
ZoneSalies.push（数据[i].zone_）
}
var图表数据={
标签：zoneNom，
数据集：[{
标签：“人口”，
背景颜色：“rgba（2002002000.75）”，
边框颜色：“rgba（2002002002000.75）”，
hoverBackgroundColor:'rgba（2002002002001）'，
hoverBorderColor:'rgba（2002002002001）'，
资料来源：zonePop
}, {
标签：“工资”，
背景颜色：“rgba（2002002000.75）”，
边框颜色：“rgba（2002002002000.75）”，
hoverBackgroundColor:'rgba（2002002002001）'，
hoverBorderColor:'rgba（2002002002001）'，
数据：地带性
}]
};
var选项={
比例：{
雅克斯：[{
滴答声：{
贝吉纳泽罗：是的
}
}]
}
};
var ctx=$（“我的画布”）；
var条形图=新图表（ctx{
类型：'bar'，
数据：图表数据，
选项：选项
});
var-myBarChart；
$（“#区域选择”）.val（区域映射[0]）.trigger（'change'）；//选择第一个选项
},
完成：函数（）{}
});
}
$（文档）.ready（函数（）{
区域（）；
});

我了解您的大部分需求，但不清楚您希望如何根据所选下拉列表值更改图表的呈现方式。您能在图表代码中显示您希望如何根据此选择筛选数据吗？是的，它工作正常，再次感谢！现在我将在其他图表上剖析并测试此方法
$("#zone-select").change(function(){
   var value = $("#zone-select option:selected").val(); // Value of selected option
   console.log('Value: '+value);
});

$("#zone-select").change(function() {
   var nom = $("#zone-select option:selected").text(); // name of selected option
   var index = zoneNom.indexOf(nom);
   var new_labels = [zoneNom[index]];
   var new_data1 = [zonePop[index]];
   var new_data2 = [zoneSalaries[index]];
   barGraph.data.labels = new_labels;
   barGraph.data.datasets[0].data = new_data1;
   barGraph.data.datasets[1].data = new_data2;
   barGraph.update(); // update chart
});

$("#zone-select").val(zonePop[0]).trigger('change');