Question

我有以下用于渲染图表的脚本：

var num = 'five';

function drawColumn() {
  $(function() {
    $.ajax({
      url: 'http://localhost/Admin/chart_data.php?num=' + num,
      type: 'GET',
      success: function(data) {
        chartData = data;
        var chartProperties = {
          "caption": "Top 10 wicket takes ODI Cricket in 2015",
          "xAxisName": "Player",
          "yAxisName": "Wickets Taken",
          "rotatevalues": "1",
          "theme": "fint"
        };
        alert('chart rendered');
        apiChart = new FusionCharts({
          type: 'column2d',
          renderAt: 'chartContainer',
          width: '500',
          height: '300',
          dataFormat: 'json',
          dataSource: {
            "chart": chartProperties,
            "data": chartData
          }
        });
        apiChart.render();

      }
    });
  });
}

将调用此函数的html如下：

<select name="select1" onchange="num=this.value;drawColumn();">
  <option value="five">Five</option>
  <option value="all">All</option>
</select>

图表会在页面加载时第一次呈现。但是，在下拉列表中更改选项时不会呈现它。我哪里错了？请帮忙

Answer 1

在函数调用中添加文档就绪处理程序不起作用。这是因为文档就绪事件先前已经触发并且不会再次触发，因此该函数从不执行内容。

function drawColumn() {
  $(function() {//document ready handler
  ...code here
  });
}

正确：

function drawColumn() {
      ...code here
}

编辑：建议

而不是：

<select name="select1" onchange="num=this.value;drawColumn();">
  <option value="five">Five</option>
  <option value="all">All</option>
</select>

此

<select id="select1" name="select1">
  <option value="five">Five</option>
  <option value="all">All</option>
</select>

然后这个：

$(function() {
  $('#select1').on('change', drawColumn);
  function drawColumn(data) {
    var num = $(this).val();
    $.ajax({
      url: 'http://localhost/Admin/chart_data.php?num=' + num,
      type: 'GET'
    }).done(function(data) {
      var chartData = data;
      var chartProperties = {
        "caption": "Top 10 wicket takes ODI Cricket in 2015",
        "xAxisName": "Player",
        "yAxisName": "Wickets Taken",
        "rotatevalues": "1",
        "theme": "fint"
      };
      alert('chart rendered');
      var apiChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chartContainer',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
          "chart": chartProperties,
          "data": chartData
        }
      });
      apiChart.render();
    });
  }
});

如何在ajax url中传递下拉列表的值

1 个答案: