title: How to pass value of a dropdownlist in ajax url
body: <p>I have the following script which is used to render a chart:</p>
  
  <pre class="lang-js prettyprint-override"><code>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();
  
        }
      });
    });
  }
  </code></pre>
  
  
  
  <p>The html which will invoke this function is as follows:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;select name="select1" onchange="num=this.value;drawColumn();"&gt;
    &lt;option value="five"&gt;Five&lt;/option&gt;
    &lt;option value="all"&gt;All&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  
  
  <p>The chart gets rendered the first time when the page gets loaded. However, it is not rendered when the options are changed in the dropdown list. Where am I going wrong? Please help </p>