Laravel动态表单：从数据库获取下拉框选项

第一步：后端编写接口返回供应商列表 #

首先你需要在后端写一个接口，从数据库查询所有供应商数据，返回JSON格式的结果。这里拿PHP举个例子（如果用Node.js、Python等其他语言，核心逻辑是一致的）：

<?php
// 数据库连接示例（用PDO，你可以换成自己常用的连接方式）
$pdo = new PDO('mysql:host=localhost;dbname=你的数据库名', '用户名', '密码');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 查询供应商表数据，假设表名为vendors，字段是vendor_id和vendor_name
$stmt = $pdo->query("SELECT vendor_id, vendor_name FROM vendors");
$vendors = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 设置响应头并返回JSON
header('Content-Type: application/json');
echo json_encode($vendors);
?>

把这个文件存为get_vendors.php（名字自定义就行），测试一下，它应该返回类似这样的JSON结构：

[{"vendor_id":"1","vendor_name":"Vendor1"},{"vendor_id":"2","vendor_name":"Vendor2"}]

第二步：修改前端代码，动态加载并复用选项 #

接下来调整你的前端JS代码：先在页面加载时获取供应商列表，把选项字符串存好，之后添加新行的时候直接复用这个字符串，不用再硬编码。另外注意你原来的代码里有个小bug：select标签的name和id属性引号没闭合（比如name="jobitem_name[] id=jobitem_name['+i+']"应该改成name="jobitem_name[]" id="jobitem_name['+i+']"），这个得先修复，不然表单提交会出问题。

修改后的完整JS代码：

$(document).ready(function() {
    var i = 0;
    // 预加载供应商选项，先初始化空字符串
    var vendorOptions = '';
    
    // 从后端接口获取供应商数据
    $.getJSON('get_vendors.php', function(data) {
        // 遍历数据生成option标签
        $.each(data, function(index, vendor) {
            // 这里注意转义，避免特殊字符导致的HTML问题
            vendorOptions += `<option value="${vendor.vendor_id}">${vendor.vendor_name}</option>`;
        });
    });

    $('#add_jobitem').click(function(){
        i++;
        $('#jobitem tr:last').after(`<tr>
            <td>
                <select name="jobitem_name[]" id="jobitem_name[${i}]">
                    <option value="Item1">Item1</option>
                    <option value="Item2">Item2</option>
                    <option value="Other">Other</option>
                </select>
            </td>
            <td><input name="jobitem_description[]" id="jobitem_description[${i}]" class="jobitem_description" placeholder="Description"></td>
            <td><input name="jobitem_qty[]" id="jobitem_qty[${i}]" class="jobitem_qty" placeholder="Qty" oninput="calculate_jobitem_total()" onchange="calculate_jobitem_total()"></td>
            <td><input name="jobitem_each_price[]" id="jobitem_each_price[${i}]" class="jobitem_each_price" placeholder="Each Price" oninput="calculate_jobitem_total()" onchange="calculate_jobitem_total()"></td>
            <td><input name="jobitem_total[]" id="jobitem_total[${i}]" class="jobitem_total" placeholder="Total"></td>
            <td>
                <select name="jobitem_vendor[]" id="jobitem_vendor[${i}]">${vendorOptions}</select>
            </td>
            <td><input name="jobitem_po_number[]" id="jobitem_po_number[${i}]" class="jobitem_po_number" placeholder="PO Number"></td>
        </tr>`);
    });
});

额外小提示 #

• 如果页面初始就有一行表单，也可以用这个动态生成的供应商选项替换掉原来的硬编码内容，保持所有行的下拉框数据一致。
• 要是供应商名称里有特殊字符（比如引号、尖括号），可以用更安全的方式生成option，比如：

var option = $('<option>').val(vendor.vendor_id).text(vendor.vendor_name);
vendorOptions += option.prop('outerHTML');

这样能避免XSS风险，也不会因为特殊字符破坏HTML结构。

内容的提问来源于stack exchange，提问作者zaster