Question

这可能是一个非常简单的答案，但我是jQuery / JavaScript的新手，所以请耐心等待。

目前我有4个选项的下拉菜单，然后是旁边的<button>，根据用户选择的内容更改图表。基本上我所要做的就是不再需要按钮，只需在用户点击其中一个选项时刷新图表。

以下是我基于它的jsfiddle。

任何帮助都会很棒，谢谢

亨利

Answer 1

您希望选择列表中的“更改”事件，而不是点击事件。（根据您的小提琴代码）

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

Answer 2

使用$(this)

工作演示 http://jsfiddle.net/WDcL4/ 或 http://jsfiddle.net/gUnax/3/

使用的API：http://api.jquery.com/change/

请注意Jquery 1.4.4使用$("#list").change(function(){...}); http://jsfiddle.net/gUnax/2/

Jquery 1.7 ......可以使用$("#list").on('change', function(){...});

希望这有帮助！

<强>码

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

将选项视为选择下拉列表中的单击事件

2 个答案: