Empty option after every populated option field

Question

i retrieve data from a ajax call to populate a select element with options. While all works fine, i cannot fingure out why i get empty option tags after every populated row.

  function Countries(continent) {
    $('#countries').empty();
    $('#countries').append("<option>Loading...</option>");

    // init
    var ajaxRequest;

    var dataObject = {
        continent_name: continent
      };

    ajaxRequest = $.ajax({
      type: "POST",
      url:"/process/contact-divisions-countries/",
      dataType:"json",
      data: dataObject
    });

    ajaxRequest.done(function (data, textStatus, jqXHR){

       // THIS IS THE ITERATION WHERE IT GETS OBSCURE

       $.each(data,function (index, item) {
           $('#countries').append('<option value="'+ item.country_name +'">'+ item.country_title +'<option>');
       });

      // TRIED THIS WITH FOREACH ALSO,- SAME RESULT

      // data.forEach((item) => console.log(item));
      // data.forEach((item) => {
      // $('#countries').append('<option value="'+ item.country_name +'">'+ item.country_title +'<option>');
      });

    });

    ajaxRequest.fail(function (data, textStatus, jqXHR){
      console.log(data);
    });

  }

The data gets its result from the json return (/process/contact-divisions-countries/).

  // $_contacts is a array

  foreach($_contacts as $item) {
    $response[] = [
      'country_name' => $item['name'],
      'country_title' => $item['title']
    ];
  }

  $o = json_encode($response);

  echo $o;

Live Example (top of page): https://kubota.olafgleba.de/service/

Any help or hint is highly appreciated. Thx in advance and cheers.

Answer 1

Replace '<option value="'+ item.country_name +'">'+ item.country_title +'<option>' with '<option value="'+ item.country_name +'">'+ item.country_title +'</option>' (missing closing tag).