使用 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 database

echo $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 你用你的方式，我只是概述了解决方案，&nbsp; &nbsp;$(document).ready(function(){&nbsp; &nbsp; var v1=1; //actually id of a button will be saved in this variable which is necessary to make database query&nbsp; &nbsp; var v2=2;&nbsp; &nbsp; var v3=3;&nbsp; &nbsp; var html='';&nbsp; &nbsp; html += '<select name="abc" id="abc" class="form-control selectpicker" data-live-search="true" required>';&nbsp; &nbsp; html += '</select>';&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; $('#span_product_details').append(html);&nbsp; &nbsp; load_dropdown(v1,v2,v3);&nbsp; &nbsp; }&nbsp; &nbsp;// use v1,v2,v3 however you have, either in function or global, param, or any other way&nbsp; &nbsp; function load_dropdown(v1,v2,v3) {&nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:"practice.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; method:"POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data:{v1:v1,v2:v3,v3:v3},&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(data)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(data); //&nbsp; if in console it display html then fine,else check format&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('#abc').append(data); // or use .selectpicker as selector if its unique&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.selectpicker').selectpicker();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }