Jquery - установка выбранной опции по значению не работает

Question

Я перепробовал все решения от Google. Что мне не хватает? Опция, которую я хочу, не выбрана. Вот часть кода, с которой у меня проблемы. Я включил некоторые другие вещи, которые я попробовал (закомментировал).

Если это имеет значение, этот список создается динамически, но код для выбора его по значению идет после этого процесса. я нахожусь в Chrome версии 80.0.3987.149

// EDIT ADDED THIS CODE FROM MY APPLICATION
const url = '/api/Customers';

// Populate dropdown
$.getJSON(url, function (data) {
    $.each(data, function (key, entry) {
        dropdown.append($('<option></option>').attr('value', entry.CustomerID).text(entry.Name + ' - ' + entry.Email));
    })
});
// END EDIT ^^^^^

//var customerID = window.location.hash;
var customerID = "6a1920b2-f388-4790-a720-75048e1407a7"; //Test User 5
console.log(customerID);

//$('#customer-dropdown option[value="'+ customerID +'"]').prop('selected', true);
//$("#customer-dropdown select").val(customerID);
$("#customer-dropdown option[data-value='" + customerID +"']").attr("selected","selected");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="customer-dropdown" name="c15905d7-8216-4e81-ac15-2fafd10b49e8">
	<option disabled="">Select Customer</option>
	<option value="297f8676-80bf-43e5-b463-031a5b5154aa">Test User 1</option>
	<option value="83941899-8039-488f-bf6b-0d036c7d6556">Test User 2</option>
	<option value="263356fd-d803-4436-a7fc-4df5a3095771">Test User 3</option>
	<option value="2e31ee49-b096-4237-b07e-61071871334d">Test User 4</option>
	<option value="6a1920b2-f388-4790-a720-75048e1407a7">Test User 5</option>
	<option value="072f6800-570c-4004-b9cd-7bdb4cf98b0a">Test User 6</option>
	<option value="c957f2c0-f72e-4de7-9b4f-9272cbbfd783">Test User 7</option>
	<option value="d870225f-c020-4369-bd7b-9dc5d16f34a1">Test User 8</option>
</select>

Answer 1

Просто присвойте значение select.

//var customerID = window.location.hash;
var customerID = "6a1920b2-f388-4790-a720-75048e1407a7"; //Test User 5

//$('#customer-dropdown option[value="'+ customerID +'"]').prop('selected', true);
//$("#customer-dropdown select").val(customerID);
$("#customer-dropdown").val(customerID);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="customer-dropdown" name="c15905d7-8216-4e81-ac15-2fafd10b49e8">
	<option disabled="">Select Customer</option>
	<option value="297f8676-80bf-43e5-b463-031a5b5154aa">Test User 1</option>
	<option value="83941899-8039-488f-bf6b-0d036c7d6556">Test User 2</option>
	<option value="263356fd-d803-4436-a7fc-4df5a3095771">Test User 3</option>
	<option value="2e31ee49-b096-4237-b07e-61071871334d">Test User 4</option>
	<option value="6a1920b2-f388-4790-a720-75048e1407a7">Test User 5</option>
	<option value="072f6800-570c-4004-b9cd-7bdb4cf98b0a">Test User 6</option>
	<option value="c957f2c0-f72e-4de7-9b4f-9272cbbfd783">Test User 7</option>
	<option value="d870225f-c020-4369-bd7b-9dc5d16f34a1">Test User 8</option>
</select>

Answer 2

В конечном итоге это было мое решение для борьбы с проблемой синхронизации, представленной .get JSON (asyn c):

Я только что выбрал его, когда строил раскрывающийся список:

$.getJSON(url, function (data) {
    $.each(data, function (key, entry) {
        //console.log(entry.CustomerID + " | " + customerID + " | " + (entry.CustomerID == customerID))
        if (entry.CustomerID == customerID) {
            dropdown.append($('<option></option>').attr({ value: entry.CustomerID, selected: "selected" }).text(entry.Name + ' - ' + entry.Email));
            dropdown.val(customerID);
        } else {
            dropdown.append($('<option></option>').attr('value', entry.CustomerID).text(entry.Name + ' - ' + entry.Email));
        }
    })
});