Question

我正在尝试使用 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经验的人来说，这可能是微不足道的。

感谢您的帮助！

最佳：

埃里克

Answer 1

我认为（大多数）浏览器不允许在2020/07标记中包含纯文本。

这是Mozilla关于<option>-标记的允许内容的说法：

允许的内容：文本，可能带有转义字符（例如 é）。

来源：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

不确定是否可以将某些内容设置为背景。

将django-select2用于包含图片的下拉列表

1 个答案: