I am trying to add additional fields to a Django form using Bootstrap select. I currently have these two models:
class Organisation(models.Model):
title = models.CharField()
topic = models.ForeignKey(Topic)
pic = models.ImageField()
Class Choice
organisation = models.ForeignKey(Organisation, on_delete=models.CASCADE)
and a form containing this widget:
widgets = {
'organisation': forms.Select(attrs={'class': 'form-control selectpicker', 'data-live-search':'true'}),
},
This is working correctly and is rendering the drop down select form on the template. However, I also want to show the image and topic like so:
(my template currently)
<div class="col-md-12">{% bootstrap_field form.organisation show_label=False %}</div>
Desired output:
<option data-thumbnail="Organisation.pic" data subtext="Organisation.topic">Organisation.title</option>
or alternatively, display results grouped by topic:
<optgroup label="Topic1">
<option data-thumbnail="Organisation.pic"> Organisation.title</option>
<option data-thumbnail="Organisation2.pic"> Organisation2.title</option>
</optgroup>
<optgroup label="Topic2">
<option data-thumbnail="Organisation3.pic"> Organisation3.title</option>
</optgroup>
I've tried to do this directly in the template using a for loop for each option (i.e for x, org in form.fields.organisation.choices), however it doesn't pull in any other fields beyond the organisation title (organisation.topic and organisation.pic.url, don't seem to work)?