对带有图片的下拉列表使用django-select2 2
我正在尝试采用另一种方法来解决下面提到的使用django-select2模块的问题。
Django choicefield using pictures instead of text not displaying
我有一个django模型，它看起来像：
我的模型看起来：
class MyPicture(models.Model):
name = models.CharField(max_length=60,
blank=False,
unique=True)
logo = models.ImageField(upload_to='logos')
def __str__(self):
return self.name我想创建一个看起来像
来源：http://select2.github.io/select2/
从本质上说，我在左边有一张大图片(对应于我所谓的徽标)，右边有一些文本(对应于名称)。
我的表格看起来是：
from django_select2.forms import Select2MultipleWidget
class MyPictureForm(forms.Form):
pictures = forms.ModelChoiceField(widget=Select2MultipleWidget, queryset=MyPicture.objects.all())我的看法是：
def mypicture(request):
form = MyPictureForm(request.POST or None)
if form.is_valid():
#TODO
return render(request, 'myproj/picture.html', {'form': form})最后，我的hmtl (哪里出了问题)：
{% load staticfiles %}
<head>
{{ form.media.css }}
<title>In construction</title>
</head>
<form action="{% url 'mypicture' %}" method="post">
{% csrf_token %}
<select id="#e4" name="picture">
{% for x in form.pictures.field.queryset %}
<option value="{{ x.id }}"><img src="{{ MEDIA_URL }}{{ x.logo.url }}" height=150px/></option>
{% endfor %}
</select>
<br>
<br>
<input type="submit" value="Valider" class="btn btn-primary"/>
<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
function format(x) {
if (!x.id) return x.name; // optgroup
return "<img src=" + x.logo.url + "/>" + x.name;
}
$(document).ready(function () {
$("#e4").select2({
formatResult: format,
formatSelection: format,
dropdownCssClass: "bigdrop", // apply css that makes the dropdown taller
escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
});
});
</script>
{{ form.media.js }}
</form>不幸的是，我还不足以判断我的错误是在javascript中还是在循环中。当我右击获得源代码时，选项将被正确设置。所以我必须离答案不远。
对于那些拥有比我更多javascript经验的人来说，这可能是微不足道的。
谢谢你的帮助！！
最佳：
埃里克
回答 1
Stack Overflow用户
发布于 2020-07-09 13:32:25
我认为(大多数)浏览器除了纯文本之外，不允许在<option>-tag中使用任何内容。
关于<option>-tags允许的内容，Mozilla就是这样说的：
允许内容:文本，可能带有转义字符(如.`)
来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option
但不确定是否可以将某物设置为背景。
https://stackoverflow.com/questions/52899128
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号