JavaScript修改Google Chart点击事件及下拉菜单函数调用咨询

嘿，我来帮你调整代码，把原来的按钮点击触发逻辑改成下拉菜单选项切换触发～

首先，我们先确定下拉菜单的HTML结构，用一个<select>元素来实现，给它一个唯一ID方便绑定事件，选项对应UK和US两个选择：

<select id="countryChartSelector">
  <option value="UK">加载英国犯罪数据</option>
  <option value="US">加载美国犯罪数据</option>
</select>
<!-- 这里放置你的图表容器，比如 <div id="chartContainer"></div> -->

接下来修改你的JavaScript代码，把原来绑定按钮点击的逻辑，替换成监听下拉菜单的change事件，根据选中的选项值来调用对应的加载函数：

var lstLength = {};
var chartData = [["Crime Types", "Number"]];

google.charts.load('current', { packages: ['corechart'] }).then(function () {
  // 移除原有按钮点击绑定，改为监听下拉菜单的切换事件
  $('#countryChartSelector').on('change', function() {
    // 获取当前选中的选项值
    var selectedCountry = $(this).val();
    // 根据选中值调用对应的数据加载函数
    if (selectedCountry === 'UK') {
      loadUK();
    } else if (selectedCountry === 'US') {
      loadUS();
    }
  });

  // 可选：页面加载完成后自动触发一次切换事件，确保默认显示某国数据
  $('#countryChartSelector').trigger('change');
});

function loadUK() {
  var counter = 0;
  $.getJSON("result.json", function(json) {
    var input = json;
    // 这里补全你原有的数据处理逻辑
    for (var i in input) {
      // ... 你的原有代码
    }
    // 记得补充图表绘制逻辑，比如：
    // var data = google.visualization.arrayToDataTable(chartData);
    // var chart = new google.visualization.ColumnChart(document.getElementById('chartContainer'));
    // chart.draw(data, { title: '英国犯罪数据统计' });
  });
}

function loadUS() {
  // 这里是你的美国数据加载与图表绘制逻辑
  // ... 你的原有代码
}

关键改动说明： #

• 移除了原来针对#UKChart和#USChart按钮的点击事件绑定
• 新增了对下拉菜单#countryChartSelector的change事件监听，每次切换选项时触发逻辑
• 通过$(this).val()获取选中的国家标识，判断后调用对应的加载函数
• 可选添加页面加载时自动触发一次切换事件，确保页面初始化就有图表显示

这样调整后，用户切换下拉菜单的选项时，就会自动调用对应的loadUK()或loadUS()函数加载并渲染数据啦～

内容的提问来源于stack exchange，提问作者Overtime