在選擇下拉列表中將選項視為單擊事件

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

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