javascript - 将选项视为选择下拉列表上的单击事件

Question

这可能是一个非常简单的答案，但是我对 jQuery/JavaScript 很陌生，所以请多多包涵。

目前，我有一个包含 4 个选项的下拉菜单，然后<button>旁边有一个根据用户选择的内容更改图表的选项。基本上，我想要实现的只是消除对按钮的需求，并在用户单击其中一个选项时刷新图表。

以下是我基于它的jsfiddle。

http://jsfiddle.net/jlbriggs/EmMxH/92/

任何帮助都会很棒，谢谢

亨利

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

工作演示 http://jsfiddle.net/WDcL4/ 或 http://jsfiddle.net/gUnax/3/使用$(this)

使用的 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);    
});
​