如何实现Django Model Choice Form同时显示Logo与团队名称？

你遇到的核心问题是：原生HTML的<select>下拉框无法在<option>标签内渲染图片，浏览器会把<img>标签当作文本内容显示，所以你的图片代码被忽略，只显示了文字。

下面提供两种可行的解决方案：

方案一：改用单选按钮组（RadioSelect）显示图片 #

这种方法不需要额外JS，直接通过Django自定义Widget实现带图片的单选选项：

1. 自定义Widget和字段 #

from django import forms
from django.utils.html import format_html
from .models import Team

class TeamRadioSelect(forms.RadioSelect):
    def create_option(self, name, value, label, selected, index, subindex=None, attrs=None):
        # 调用父类方法生成基础选项结构
        option = super().create_option(name, value, label, selected, index, subindex, attrs)
        # 获取当前团队实例
        team = self.choices.queryset[index]
        # 替换选项标签为带图片的HTML
        option['label'] = format_html(
            '<img src="{}" class="form-logo" alt="{}">{}',
            team.logo,
            team.name,
            team.name
        )
        return option

class TeamModelChoiceField(forms.ModelChoiceField):
    # 指定自定义的RadioSelect Widget
    widget = TeamRadioSelect

class TeamChoiceForm(forms.Form):
    team_home = TeamModelChoiceField(
        queryset=Team.objects.all(),
        empty_label="选择主队",
        label="主队"
    )
    team_away = TeamModelChoiceField(
        queryset=Team.objects.all(),
        empty_label="选择客队",
        label="客队"
    )

2. 模板渲染 #

在模板中直接渲染表单字段即可，单选按钮组会自动显示图片和名称：

<form method="post">
    {% csrf_token %}
    {{ form.team_home }}
    {{ form.team_away }}
    <button type="submit">提交</button>
</form>

<style>
/* 给图片添加样式 */
.form-logo {
    width: 30px;
    height: 30px;
    margin-right: 10px;
    vertical-align: middle;
}
</style>

方案二：用JavaScript实现带图片的下拉框 #

如果必须保留下拉框样式，可以通过JS将原生<select>替换为支持图片的自定义下拉组件：

1. 保持原有表单代码不变 #

你的原表单代码可以保留，不需要修改字段类。

2. 模板中添加JS和CSS #

<form method="post">
    {% csrf_token %}
    {{ form.team_home }}
    {{ form.team_away }}
    <button type="submit">提交</button>
</form>

<style>
/* 自定义下拉框样式 */
.custom-select {
    position: relative;
    width: 250px;
    margin: 10px 0;
}

.custom-select .selected-item {
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.custom-select .options-list {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 4px 4px;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
    max-height: 250px;
    overflow-y: auto;
    display: none;
    z-index: 100;
}

.custom-select .options-list.show {
    display: block;
}

.custom-select .options-list li {
    padding: 8px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.custom-select .options-list li:hover {
    background-color: #f5f5f5;
}

.custom-select .options-list li.selected {
    background-color: #e8f0fe;
}

/* 图片样式 */
.form-logo {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

/* 隐藏原生select */
.custom-select select {
    display: none;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 找到所有团队选择的select元素
    const teamSelects = document.querySelectorAll('select[id^="id_team_"]');
    
    teamSelects.forEach(select => {
        // 创建自定义下拉容器
        const container = document.createElement('div');
        container.className = 'custom-select';
        select.parentNode.insertBefore(container, select);
        container.appendChild(select);
        
        // 创建选中项显示元素
        const selectedItem = document.createElement('div');
        selectedItem.className = 'selected-item';
        updateSelectedItem(selectedItem, select);
        container.insertBefore(selectedItem, select);
        
        // 创建选项列表
        const optionsList = document.createElement('ul');
        optionsList.className = 'options-list';
        populateOptionsList(optionsList, select);
        container.appendChild(optionsList);
        
        // 点击选中项切换下拉列表显示
        selectedItem.addEventListener('click', () => {
            optionsList.classList.toggle('show');
        });
        
        // 点击选项更新选中状态
        optionsList.addEventListener('click', (e) => {
            if (e.target.tagName === 'LI') {
                select.value = e.target.dataset.value;
                updateSelectedItem(selectedItem, select);
                optionsList.classList.remove('show');
            }
        });
        
        // 点击页面其他区域关闭下拉列表
        document.addEventListener('click', (e) => {
            if (!container.contains(e.target)) {
                optionsList.classList.remove('show');
            }
        });
    });
    
    // 更新选中项的显示内容
    function updateSelectedItem(element, select) {
        const selectedOption = select.options[select.selectedIndex];
        element.innerHTML = selectedOption.innerHTML;
    }
    
    // 填充选项列表
    function populateOptionsList(list, select) {
        list.innerHTML = '';
        Array.from(select.options).forEach(option => {
            const li = document.createElement('li');
            li.dataset.value = option.value;
            li.innerHTML = option.innerHTML;
            if (option.selected) {
                li.classList.add('selected');
            }
            list.appendChild(li);
        });
    }
});
</script>

额外注意事项 #

• 确保team.logo存储的是可访问的完整URL（如https://example.com/logo.png），如果是相对路径，需要在代码中补全域名（比如用request.build_absolute_uri(team.logo)）。
• 可以根据需求调整CSS样式，比如图片大小、间距等。

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