Jquery - 按值设置选定选项不起作用

Question

我已经尝试了谷歌的所有解决方案。我错过了什么？我想要的选项没有被选中。这是我遇到问题的代码部分。我已经包含了我尝试过的其他一些东西（注释掉了）。

如果重要的话，这个列表是动态构建的，但是按值选择它的代码是在该过程之后。我在 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">&nbsp; <option disabled="">Select Customer</option>&nbsp; <option value="297f8676-80bf-43e5-b463-031a5b5154aa">Test User 1</option>&nbsp; <option value="83941899-8039-488f-bf6b-0d036c7d6556">Test User 2</option>&nbsp; <option value="263356fd-d803-4436-a7fc-4df5a3095771">Test User 3</option>&nbsp; <option value="2e31ee49-b096-4237-b07e-61071871334d">Test User 4</option>&nbsp; <option value="6a1920b2-f388-4790-a720-75048e1407a7">Test User 5</option>&nbsp; <option value="072f6800-570c-4004-b9cd-7bdb4cf98b0a">Test User 6</option>&nbsp; <option value="c957f2c0-f72e-4de7-9b4f-9272cbbfd783">Test User 7</option>&nbsp; <option value="d870225f-c020-4369-bd7b-9dc5d16f34a1">Test User 8</option></select>

Answer 2

这最终成为我解决 .getJSON (async) 引入的时间问题的解决方案：我只是在构建下拉列表时选择了它：$.getJSON(url, function (data) {&nbsp; &nbsp; $.each(data, function (key, entry) {&nbsp; &nbsp; &nbsp; &nbsp; //console.log(entry.CustomerID + " | " + customerID + " | " + (entry.CustomerID == customerID))&nbsp; &nbsp; &nbsp; &nbsp; if (entry.CustomerID == customerID) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dropdown.append($('<option></option>').attr({ value: entry.CustomerID, selected: "selected" }).text(entry.Name + ' - ' + entry.Email));&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dropdown.val(customerID);&nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dropdown.append($('<option></option>').attr('value', entry.CustomerID).text(entry.Name + ' - ' + entry.Email));&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; })});