score:3

Accepted answer

you want the "change" event on the select list, not the click event. (based on your fiddle code)

<select id="list">
  <option value="a">data set a</option>
  <option value="b">data set b</option>
  <option value="c">data set c</option>
  <option value="d">data set d</option>    
</select>

$("#list").change(function(){
  //... do stuff
  var selval = $(this).val();
  if(selval == "a" || selval == ''){
    options.series = [{name: 'a', data: [1,2,3,2,1]}]
  } else if(selval == "b"){
    options.series = [{name: 'b', data: [3,2,1,2,3]}]
  } else if(selval == "c"){
    options.series = [{name: 'c', data: [5,4,8,7,6]}]
  } else {
    options.series = [{name: 'd', data: [4,7,9,6,2]}]
  }
  var chart = new highcharts.chart(options);
});

score:2

working demo http://jsfiddle.net/wdcl4/ or http://jsfiddle.net/gunax/3/ using $(this)

api used: http://api.jquery.com/change/

please note for jquery 1.4.4 use $("#list").change(function(){...}); http://jsfiddle.net/gunax/2/

jquery 1.7... could use $("#list").on('change', function(){...});

hope this helps!

code

$("#list").on('change', function(){
    //alert('f')
    var selval = $("#list").val();
    if(selval == "a" || selval == '')
    {
        options.series = [{name: 'a', data: [1,2,3,2,1]}]
    }
    else if(selval == "b")
    {
        options.series = [{name: 'b', data: [3,2,1,2,3]}]
    }
    else if(selval == "c")
    {
        options.series = [{name: 'c', data: [5,4,8,7,6]}]
    } 
    else
    {
        options.series = [{name: 'd', data: [4,7,9,6,2]}]
    }  
    var chart = new highcharts.chart(options);    
});
​

Related Query

More Query from same tag