使用 Jquery 和 AJAX 填充 Select 元素，不使用 async:false 属性

Question

我正在尝试从数据库中填充一个选择元素，我需要先从我的 Jquery 脚本中传递一些变量（按钮的 ID）。为此，我使用 AJAX 调用并将变量传递给 PHP 文件，进行 SQL 查询，获取数据......一切都很好......但是当我创建 html 代码然后从 PHP 传递给 AJAX 时。Jquery 变量html没有从 AJAX 调用中获取任何数据...然后我阅读了有关在 AJAX 调用中使用 async:false 属性的信息...但我知道这不是一个好的解决方案...我是网络开发的新手..我想让你建议我该怎么做...我的代码示例如下'''<span id="span_product_details"></span><script type="text/javascript">$(document).ready(function(){    var v1=1; //actually id of a button will be saved in this variable which is necessary to make database query    var v2=2;    var v3=3;    var html='';    html += '<select name="abc" id="abc" class="form-control selectpicker" data-live-search="true" required>';    $.ajax({        url:"practice.php",        method:"POST",        data:{v1:v1,v2:v3,v3:v3},        dataType:"html",        success:function(data)        {            html += data;        }    });    html += '</select>';        $('#span_product_details').append(html);    $('.selectpicker').selectpicker();});</script><?php//example code of practice.php file (a seperate file)//$query = (based on $_POST['v1'], $_POST['v2'] and $_POST['v3'])$str='<option value="1">Hello</option>'; //data obtained from database$str.='<option value="2">Hi</option>'; //data obtained from databaseecho $str;?>'''为了更详细的理解，我正在更详细地解释问题。我有一个表，该表的每一行都有 4 列， ProcessID、ProcessDate、Edit_btn、Delete_btn 在每个过程中处理多个部分让我们说部分号 A1、A2、A3编辑按钮的 ID 也与 ProcessID 相同。现在，当按下“编辑”按钮时，将打开一个模态，执行 AJAX 调用，该模态显示包含数据的行，如下所示， （选择带有部件号的元素）（部件状态已接受、已拒绝等）（备注）现在，虽然编辑用户必须能够向同一过程添加更多部分......为此，有一个（添加按钮）带有第一行模态，现在当按下添加按钮时，一个新行将被添加到模态中，该行必须有一个选择元素，该元素应该填充一个已处理零件和未处理零件的列表......为此，我必须进行 AJAX 调用，它将 EDIT_BTN id （以获取 this.processID 下已处理的部分） 传递给 php 文件，并获取选择元素的选项。在此操作期间，我遇到了上述问题......

Answer 1

一种方法是使用 async:false 这将起作用。

另一种方法是先附加基本的 html，加载数据

或者你可以只在模态和模态显示事件中编写你选择的 html，加载数据，

ps data v1,v2,v3 你用你的方式，我只是概述了解决方案，

   $(document).ready(function(){

    var v1=1; //actually id of a button will be saved in this variable which is necessary to make database query

    var v2=2;

    var v3=3;

    var html='';

    html += '<select name="abc" id="abc" class="form-control selectpicker" data-live-search="true" required>';

    html += '</select>';

    

    $('#span_product_details').append(html);

    load_dropdown(v1,v2,v3);

    }

   // use v1,v2,v3 however you have, either in function or global, param, or any other way

    function load_dropdown(v1,v2,v3) {

        $.ajax({

            url:"practice.php",

            method:"POST",

            data:{v1:v1,v2:v3,v3:v3},

            success:function(data)

            {

                console.log(data); //  if in console it display html then fine,else check format

                $('#abc').append(data); // or use .selectpicker as selector if its unique

                $('.selectpicker').selectpicker();

            }

        });

    }