如何将Flask数据库查询结果传递给模板并让jQuery访问实现联动？

没问题，我来帮你搞定这个需求！其实核心思路就是先把Flask传过来的客户数据在模板里转成前端能直接调用的格式，然后用jQuery监听下拉菜单的选择事件，匹配对应的手机号填充到输入框里。下面是具体的实现步骤：

第一步：在Flask模板中准备前端可用的客户数据 #

首先，你需要在模板里把Flask传过来的customers列表转成JSON格式，存在一个全局变量里，这样jQuery能直接读取。可以在模板的<script>标签里这么写：

<script>
// 把Flask传递的客户数据转成JSON格式，存储为全局变量
const customerData = {{ customers | tojson }};
</script>

这里用到了Jinja2的tojson过滤器，它能安全地把Python对象转换成JSON字符串，前端可以直接当作JS对象来使用。

第二步：完善下拉菜单的HTML结构 #

假设你现在已经把客户名加载到下拉菜单里，记得给每个选项的value带上匹配标识（如果数据库里有重名客户，建议用客户ID代替姓名作为value，避免匹配错误，下面会讲优化方案）：

<select id="customerSelect">
    <option value="">请选择客户</option>
    {% for customer in customers %}
        <option value="{{ customer.customer_name }}">{{ customer.customer_name }}</option>
    {% endfor %}
</select>

<!-- 用来显示手机号的输入框 -->
<input type="text" id="phoneInput" placeholder="客户手机号" readonly>

第三步：用jQuery实现选择事件监听和手机号填充 #

接下来写jQuery代码，监听下拉菜单的change事件，当选中某个客户时，从全局变量里找到对应的手机号并填充：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
    // 监听下拉菜单的选择变化事件
    $('#customerSelect').on('change', function() {
        const selectedName = $(this).val();
        // 如果未选择任何客户，清空输入框
        if (!selectedName) {
            $('#phoneInput').val('');
            return;
        }
        // 在客户数据中匹配选中的姓名
        const selectedCustomer = customerData.find(customer => customer.customer_name === selectedName);
        // 找到对应客户后填充手机号
        if (selectedCustomer) {
            $('#phoneInput').val(selectedCustomer.customer_phone_number);
        } else {
            $('#phoneInput').val('未找到对应手机号');
        }
    });
});
</script>

补充优化：避免客户重名的方案 #

如果你的数据库里存在同名客户，上面的方法可能会匹配到第一个同名的客户，导致数据错误。这时候建议把下拉选项的value设为客户的数据库ID（假设你的Customer模型有id字段），修改如下：

模板中的下拉菜单： #

<select id="customerSelect">
    <option value="">请选择客户</option>
    {% for customer in customers %}
        <option value="{{ customer.id }}">{{ customer.customer_name }}</option>
    {% endfor %}
</select>

对应的jQuery代码： #

$(document).ready(function() {
    $('#customerSelect').on('change', function() {
        const selectedId = parseInt($(this).val());
        // 如果未选择有效ID，清空输入框
        if (isNaN(selectedId)) {
            $('#phoneInput').val('');
            return;
        }
        // 通过ID匹配客户数据
        const selectedCustomer = customerData.find(customer => customer.id === selectedId);
        if (selectedCustomer) {
            $('#phoneInput').val(selectedCustomer.customer_phone_number);
        } else {
            $('#phoneInput').val('未找到对应手机号');
        }
    });
});

这样就能完全避免重名带来的匹配问题啦！

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