使用 django-select2 生成带有图片的下拉列表

Question

我正在尝试采用另一种方法来解决我在下面描述的问题，即使用 django-select2 模块。

我有一个 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

我认为（大多数）浏览器不允许在

<option>

标签内包含除纯文本之外的任何内容。

这就是 Mozilla 关于

<option>

标签允许的内容的说法：

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

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

但不确定是否可以设置某些东西作为背景。

Answer 2

引用Select2的文档：

默认情况下，假定
templateResult
返回的字符串仅包含文本，并将通过
escapeMarkup
函数传递，该函数会去除所有 HTML 标记。

如果您需要使用结果模板渲染 HTML，则必须将渲染结果包装在 jQuery 对象中。

这意味着

format

函数应定义为：

function format(x) {
  if (!x.id) return x.name; // optgroup
  return $("<img src=" + x.logo.url + "/>" + x.name);
}

使用 django-select2 生成带有图片的下拉列表

问题描述投票：0回答：2

2个回答

最新问题

使用 django-select2 生成带有图片的下拉列表

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2