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

【问题标题】：How to pass value of a dropdownlist in ajax url如何在ajax url中传递下拉列表的值
【发布时间】：2016-08-10 09:04:07
【问题描述】：

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

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>

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

【问题讨论】：

尝试添加console.log('fire');就在您的函数内部，然后打开您的控制台并在您更改下拉菜单时查找它。
尝试删除$(function() {，因为这是document.ready的简写
删除 $(function() { 为我工作，非常感谢:)
投票将其作为离题结束“虽然类似的问题可能在这里成为主题，但这个问题的解决方式不太可能帮助未来的读者。”
除非第一次调用，否则不要使用自调用函数。

标签： javascript jquery html ajax fusioncharts

【解决方案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();
    });
  }
});

【讨论】：