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() {&nbsp; &nbsp; $.post('load.php', {&nbsp; &nbsp; &nbsp; &nbsp; req: 'load_product'&nbsp; &nbsp; }, function(data, status) {&nbsp; &nbsp; &nbsp; &nbsp; $("#product-selection").empty().append(data);&nbsp; &nbsp; &nbsp; &nbsp; // Selection code needs to go into this callback,&nbsp; &nbsp; &nbsp; &nbsp; // which is executed after the response comes back.&nbsp; &nbsp; &nbsp; &nbsp; $('#product-selection option[value="pd3"]').prop("selected", "selected")&nbsp; &nbsp; });&nbsp; &nbsp; // Selection code SHOULD NOT be here, because this is executed&nbsp; &nbsp; // right after the POST request is made.&nbsp; &nbsp; // When code at this place is executed, the response has most&nbsp; &nbsp; // likely not come back yet.});

Answer 2

请检查一下。您可以设置动态值“pdvalue”。当页面加载时你可以使用它。var pdvalue = "pd2";$(document).ready(function() {&nbsp; &nbsp; &nbsp; &nbsp; $.post('load.php', {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; req: 'load_product'&nbsp; &nbsp; &nbsp; &nbsp; }, function(data, status) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#product-selection").empty().append(data);&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; // $('#product-selection').val("pd3"); <-Refer to Item 5. Problem&nbsp; &nbsp; });&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; (function setpd(){&nbsp; &nbsp; $('#product-selection option[value="'+ pdvalue +'"]').prop("selected", true)&nbsp; &nbsp; })(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>&nbsp; &nbsp; <option value="pd1">Product One</option>&nbsp; &nbsp; <option value="pd2">Product Two</option>&nbsp; &nbsp; <option value="pd3">Product Three</option>&nbsp; &nbsp; <option value="pd4">Product Four</option>&nbsp; &nbsp; </select>