Highcharts Select menu from csv file and select option programmatically

Question

I built a line chart with Highcharts: see fiddle

The visible series can be chosen by a dropdown menu. This drop down menu is based on a csv file. Now I want to select a specific entry of the list by name, e.g. "Gro?britannien". It should not be chosen by value because the value can change from time to time.

Here is my code for getting the drop down list from csv file:

function insertCountryInList(country) {
    var list = $('select#countries');
    var newOption = 
        $('<option></option>')
        .attr('value', country.value)
        .text(country.name);

    list.append(newOption);

  }

  var CSV_URL = 'https://johanneschrist.de/grafiken/dropdown.csv';

  $.get(CSV_URL, function (data) {
    var lines = data.split("
");
    lines.shift();

    var countries = lines.map(function (line) {
      var fields = line.split(",");
      return {
        value: fields[0], 
        name: fields[1]
      };
    });

    countries.forEach(insertCountryInList);
  });

I tried this but it did not work:

    $('#countries').val('22');
    $('#countries').trigger('change');

How can I do that?

question from:https://stackoverflow.com/questions/65887053/highcharts-select-menu-from-csv-file-and-select-option-programmatically

Answer 1

Change value and call change:

$('#countries').val(22).change();

---

Live demo: https://jsfiddle.net/BlackLabel/e7q0xL4z/

API Reference: https://api.jquery.com/change/

Related question: How to trigger jQuery change event in code