Question

我尝试创建一个选择按钮，显示带有标题的图片供用户选择。

模板

<select id="fabric-select" name="select-id">
    {% for item in fabric %}
        <option value="{{item.id}}">{{item.fabric_cover.url}}</option>
        <option value="{{item.id}}"><img src="{{item.fabric_cover.url}}" alt="fabric picture">{{item.name}}</option> 
        <option value="{{item.id}}" data-image="{{item.fabric_cover.url}}"></option>
    {% endfor %}
  </select>

尝试了不同的选项，但没有一个显示图像本身。第一个选项只显示图像的静态链接。第二个选项显示名称，但没有其他内容，第三个选项显示空字段。

从我看来：

class ProductListView(ListView):
    queryset = Product.objects.all()
    def get_context_data(self, *args, **kwargs):
        context = super(ProductListView, self).get_context_data(*args, **kwargs)
        cart_obj, new_obj = Cart.objects.new_or_get(self.request)
        context['cart'] = cart_obj

        fabric_obj = Fabric.objects.all()
        context['fabric'] = fabric_obj

        return context

模型

class Fabric(models.Model):
    name         = models.CharField(max_length=120)
    fabric_cover = models.ImageField(upload_to='fabric_images', blank=False)

不确定是否根本无法直接抓取图片并将其放入选项中，如果我使用错误的代码输出模板或者我错过了某些内容使这项工作。

Answer 1

<option>元素不支持其中的任何子元素。您需要使用一些JavaScript库将选项转换为一组列表（<li>）。这是一个例子https://www.addwebsolution.com/blog/adding-image-select-list-with-cross-browser-compatibility

Django选择选项 - 在模板

1 个答案: