jquery Populating HTML select with options and setting a default results in default showing blank

Issue

I am using this jquery code below to put a list of countries into a select option and set the user's country as the default.

If I console log, the code shows I am recognising the user country correctly and in my project it has a blank where "United Kingdom" should be and that option is selected, it is just blank.

Why is this and what I should try doing differently?

  const sortedData = result.data.sort();
  for (var i = 0; i < sortedData.length; i++) {
    if (sortedData[i] === userCountry) {
      $("#country-selector").append(
        $("<option selected>", {
          value: sortedData[i],
          text: sortedData[i],
        })
      );
    } else {
      $("#country-selector").append(
        $("<option>", {
          value: sortedData[i],
          text: sortedData[i],
        })
      );
    }
  }
};```

Solution

Passing the selected attribute in the element HTML code to parse, appears to interfere with the setting of the attributes passed via parameters. Set the selected via the parameters as well instead, as true or false:

for (var i = 0; i < sortedData.length; i++) {
  $("#country-selector").append(
    $("<option>", {
      value: sortedData[i],
      text: sortedData[i],
      selected: sortedData[i] === userCountry // value of that comparison expression
                                              // will be either true or false
    })
  );
}

Answered By - CBroe