这里有几种模式可以使用，具体取决于数据的实际组织方式。
例如：

<option value="">Select value</option>
        <?php
          $query = mysqli_query($db,"Select id, val from tbl;");

在上面，您的查询似乎对所有行都完全相同。因此，您可以在循环外预先计算它，将所有行保存在数组中，然后使用数组，只需修改循环的一行：

foreach ($results as $row) {

一般来说，您可能会在M个不同的表行中有N个不同的查询，其中M〉〉N。然后，您可以预先运行查询并将其保存在子数组中，然后选择哪个数组：

foreach ($results['cities'] as $row) {

          foreach ($results[$tableRow['customerType']] as $row {

另一种可能性是在Javascript中填充行 * 客户端 *，例如使用自定义库，如 Handlebars，或手动。这样做的好处是可以保存大量HTML的传输时间。
你可以在 AJAX 中这样做。你 * 根本 * 不 * 发出任何查询 *，只需要使用一个按钮来“解锁”选择。在表中，所有相关的SELECT都被一个可能保存当前值的按钮替换，用于show：

<div class="ajaxize" data-query="...SQL..."><button>[value]</button></div>

查询必须经过服务器端验证当然。你可不想惹上小鲍比·泰布斯

例如使用jQuery，您激活类“ajaxize”，因此当您单击值时，该值将被SELECT替换：

$('#tableId').on('click', '.ajaxize button', function() {
        const $div=$(this).closest('.ajaxize');
        const query=$div.attr('data-query');
        $.post("/utilities/ajaxized.php", {
           query: query
        }).then(reply => {
           // Create a select
           const $select = $('select').attr({ name: "selectName" });
           for (let i = 0; i < reply.rows.length; i++) {
               $select.append($('option').attr({ value: reply.rows[i].value }).text(reply.rows[i].text);
           }
           // Replace the button
           $div.html($select);
        });
   });

您还需要将当前值保存在另一个数据属性中，以便能够在遍历OPTIONS时预先选择当前值。
PHP“ajaxized.php”将获取一个查询并返回一个包含所需行的JSON数组。您可以使用$.get()将回复放在浏览器缓存中，以进一步缩短响应时间。
您还可以通过使用DataTable库（有几个）来完全实现这一点，它允许您通过 AJAX 加载获得可分页的响应式数据表。虽然（必然）整体较慢，但结果可能 * 看起来 * 要快得多，并且服务器密集度较低。我个人赞成最后一种方法。

好吧。我找到解决办法了。除了上面的建议（我目前正在研究），我已经找到了一个替代的解决方案。我找到了这个tutorial
所以我在主页之外创建了另一个页面。对于主页面，我修改了按钮以添加data-id。然后添加了一个 AJAX ，它将触发一个空白的模态，并将数据从main页面发布到secondary页面。

代码main.php

<button data-id="<?php echo $row['id']; ?>" class="userinfo btn btn-success" data-toggle="tooltip" data-placement="top" title="Update Info"><i class="fa-solid fa-pencil"></i></button> 

<script>
    $(document).ready(function(){
        $(document).on('click', '.userinfo', function(e) {
            var userid = $(this).attr('id');
            $.ajax({
                url: 'secondary.php',
                type: 'post',
                data: {userid: userid},
                success: function(response){ 
                    $('.modal-body').html(response); 
                    $('#empModal').modal('show'); 
                }
            });
        });
    });
</script>

main中的空白模式

<div class="modal fade" id="empModal" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title">Title</h4>
                    <button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                </div>
            </div>
        </div>
</div>

副页

<?php
include(dirname(__DIR__).'/db.php');

$userid = $_POST['userid'];
//I inserted a select query here based on userId
//i declared the form here together with the queries

?>