Javascriptボタントグル機能をドロップダウン選択で動作させる

Question

私は、世界のJavaScript、HTML、CSSの完全な初心者です。ハイチャートを使用して作成されたいくつかのチャートを持つHTMLページがあります。このページには、インドの州のリストを含むドロップダウンメニューがあります。状態が選択されると、すべてのチャートがこの状態のデータで更新されます。各グラフには2つのボタンが付いています（フィドルリンクを参照）。ボタンを切り替えると、異なるチャートがロードされます。

問題点：これらの機能を両方とも連携させる必要があります。つまり、「Andhra Pradesh」を選択すると、Andhra Pradeshのデータを両方のチャートにロードする必要があります。私はチャートに "2017-18"の州のそれぞれのデータをロードさせることができましたが、 "その他の年"はできませんでした。間違っていることを理解できません。ここではバイオリンへのリンクです：https://jsfiddle.net/Pr4chi/w9nq1cw3/110/

そしてここでは、チャートを切り替えるためのコードは次のとおりです。

$(document).on('click', '.chart-update', function() { 
    $('button').removeClass('selected'); 
     $(this).addClass('selected'); 
     chart.destroy(); 
    $('#donut').highcharts(chartOptions[$(this).data('chartName')]); 
    chart = $('#donut').highcharts(); 
    }); 

すべてのヘルプは深く感謝されます！

Answer 1

changeイベントをselect要素にバインドし、どの状態が選択されているかに基づいてチャートシリーズのデータ​​を更新できます。以下の例を見てください。どのように動作するかを示すダミーデータ（check dataForStatesオブジェクト）を追加しました。

APIリファレンス：
http://api.highcharts.com/highcharts/Series.update
http://api.highcharts.com/highcharts/Series.setData
https://api.jquery.com/change/

例：
https://jsfiddle.net/vwyrwz61/