如何在Django中修复下拉框空白并实现选择LastName展示客户记录

一、修复下拉框空白问题 #

你的下拉框显示空白是因为<option>标签内部没有添加显示文本，仅设置了value属性。同时建议用customer_number作为value值（主键唯一，避免重名冲突），显示内容结合姓氏和名字，提升用户辨识度。

修改后的HTML下拉框代码：

<select class="form-select" id="customerSelect" aria-label="选择客户">
    <option selected>选择客户</option>
    {% if customers %}
        {% for customer in customers %}
            <option value="{{ customer.customer_number }}">{{ customer.last_name }} {{ customer.first_name }}</option>
        {% endfor %}
    {% endif %}
</select>

二、实现选择后展示对应记录 #

通过AJAX异步请求获取选中客户的详情，无需刷新页面即可展示信息，步骤如下：

1. 添加信息展示容器 #

在HTML页面中添加用于显示客户详情的区域：

<div id="customerDetails" class="mt-3" style="display: none;">
    <h4>客户详情</h4>
    <p><strong>客户编号：</strong><span id="customerNumber"></span></p>
    <p><strong>公司名称：</strong><span id="businessName"></span></p>
    <p><strong>姓名：</strong><span id="fullName"></span></p>
    <p><strong>邮箱：</strong><span id="email"></span></p>
</div>

2. 新增获取客户详情的视图函数 #

在views.py中添加接口，根据客户编号返回对应数据：

from django.http import JsonResponse

def customer_detail(request, customer_id):
    try:
        customer = Customer.objects.get(customer_number=customer_id)
        # 整理返回数据，处理空值
        data = {
            'customer_number': customer.customer_number,
            'business_name': customer.business_name if customer.business_name else '无',
            'first_name': customer.first_name,
            'last_name': customer.last_name,
            'email': customer.email if customer.email else '无'
        }
        return JsonResponse(data)
    except Customer.DoesNotExist:
        return JsonResponse({'error': '该客户不存在'}, status=404)

3. 配置URL路由 #

在项目的urls.py中添加对应路由：

from django.urls import path
from . import views

urlpatterns = [
    path('customer-record/', views.customer_record, name='customer_record'),
    path('customer-detail/<int:customer_id>/', views.customer_detail, name='customer_detail'),
]

4. 添加JavaScript处理选择事件 #

在HTML页面末尾添加JS代码，监听下拉框选择事件并请求数据：

// 获取下拉框和详情容器元素
const customerSelect = document.getElementById('customerSelect');
const customerDetails = document.getElementById('customerDetails');

customerSelect.addEventListener('change', function() {
    const customerId = this.value;
    
    // 未选择时隐藏详情
    if (!customerId) {
        customerDetails.style.display = 'none';
        return;
    }

    // 异步请求客户详情
    fetch(`/customer-detail/${customerId}/`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                alert(data.error);
                customerDetails.style.display = 'none';
                return;
            }
            // 填充详情数据
            document.getElementById('customerNumber').textContent = data.customer_number;
            document.getElementById('businessName').textContent = data.business_name;
            document.getElementById('fullName').textContent = `${data.first_name} ${data.last_name}`;
            document.getElementById('email').textContent = data.email;
            // 显示详情区域
            customerDetails.style.display = 'block';
        })
        .catch(() => {
            alert('获取客户信息失败，请稍后重试');
        });
});

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