3

我想创建一个应用程序，允许用户在包含在特定文件夹中的所有图像之间选择一个图像。下拉输入将呈现图像和文件名的缩略图。选择值将是图像的路径。

我知道使用jQuery UI 和 javascript可以做到这一点，但我想知道如何在表单中动态生成选择以获得所需的视觉效果。

如果您有其他想法，谢谢您的任何建议

动态形式（不完整）：

filename_list = ???
path_list = ???
images_thumbnails_list = ???

class imagesForm(forms.Form):
    def __init__(self, user, *args, **kwargs):
        super(imagesForm, self).__init__(*args, **kwargs)
        self.fields['selectedImage'] = forms.ChoiceField(choices=
                         for path in path_list: str(path),
                         for filename in filename_list: str(filename)
                         for thumbnail in images_thumbnails_list: thumbnail )

所需输入字段的示例：

  <select name="webmenu" id="webmenu">
    <option value="calendar" data-image="icons/icon_calendar.gif">Calendar</option>
    <option value="shopping_cart" data-image="icons/icon_cart.gif">Shopping Cart</option>
    <option value="cd" data-image="icons/icon_cd.gif">CD</option>
    <option value="email"  selected="selected" title="icons/icon_email.gif">Email</option>
    <option value="faq" data-image="icons/icon_faq.gif">FAQ</option>
    <option value="games" data-image="icons/icon_games.gif">Games</option>
  </select>

视觉示例：

在此处输入图像描述

4

1 回答 1

2

我认为这个任务的一个很好的解决方案是为你的选择制作一个模型

class Countries(models.Model):
    name = models.CharField(length=255)
    thumbnail = models.ImageField(upload_to='static_directory')

并使用夹具来填充这些数据

countries_list = Countries.objects.all()

class imagesForm(forms.Form):
    def __init__(self, user, *args, **kwargs):
        super(imagesForm, self).__init__(*args, **kwargs)
        self.fields['selectedImage'] = forms.ChoiceField(choices=countries_list)

并像这样在您的模板中呈现它们

{% for country in field.choices %}
    <option value="{{country.id}}"><img src="{{country.image.url}}"/> {{country.name}}</option>
{% endfor %}
于 2013-08-22T14:27:27.293 回答