Jquery - 无法自动选择从回调派生的特定选项

Question

目标：页面加载时默认选择产品三，使用Jquery而不是硬编码。来自 MySQL 的数据：    PDID  PDNAME    pd1   Product One    pd2   Product Two    pd3   Product Three    pd4   Product Four      HTML    <select id="product-selection">    </select>jQuery    $(document).ready(function() {        $.post('load.php', {            req: 'load_product'        }, function(data, status) {            $("#product-selection").empty().append(data);        });        // $('#product-selection').val("pd3"); <-Refer to Item 5. Problem    });    Callback Return:    <option selected disabled></option>    <option value="pd1">Product One</option>    <option value="pd2">Product Two</option>    <option value="pd3">Product Three</option>    <option value="pd4">Product Four</option>在这个阶段一切都很好。下拉选择加载了回调值。问题：已在 Jquery 中尝试过以下操作，但加载页面时未选择 pd3。    1. $('#product-selection').val("pd3");    2. $('#product-selection').val("pd3").change();    3. $('#product-selection').val("pd3").trigger('change');    4. $('#product-selection option[value="pd3"]').prop('selected', true);    5. $('#product-selection option[value="pd3"]').prop('selected', true).change();    6. $('#product-selection option[value="pd3"]').prop('selected', true).trigger('change');    Have tried prop / attr, ('selected', true) / ('selected', 'selected') as well. Not working.感谢是否可以提供任何解决方案。谢谢。

Answer 1

以下两种变体都对我有用：

$('#product-selection option[value="pd3"]').prop("selected", true)

$('#product-selection option[value="pd3"]').prop("selected", "selected")

确保在插入来自服务器的 HTML后运行此代码：

$(document).ready(function() {

    $.post('load.php', {

        req: 'load_product'

    }, function(data, status) {

        $("#product-selection").empty().append(data);

        // Selection code needs to go into this callback,

        // which is executed after the response comes back.

        $('#product-selection option[value="pd3"]').prop("selected", "selected")

    });

    // Selection code SHOULD NOT be here, because this is executed

    // right after the POST request is made.

    // When code at this place is executed, the response has most

    // likely not come back yet.

});

Answer 2

请检查一下。您可以设置动态值“pdvalue”。当页面加载时你可以使用它。

var pdvalue = "pd2";

$(document).ready(function() {

        $.post('load.php', {

            req: 'load_product'

        }, function(data, status) {

            $("#product-selection").empty().append(data);

        });

        // $('#product-selection').val("pd3"); <-Refer to Item 5. Problem

    });

    

    

    (function setpd(){

    $('#product-selection option[value="'+ pdvalue +'"]').prop("selected", true)

    })(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

<select id="product-selection">

<option selected disabled></option>

    <option value="pd1">Product One</option>

    <option value="pd2">Product Two</option>

    <option value="pd3">Product Three</option>

    <option value="pd4">Product Four</option>

    </select>