Как передать значение DropDownList в АЯКС URL

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 
} 

EDIT: предложения

Вместо этого:

<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(); 
    }); 
    } 
});