Django Form & Bootstrap Select

Viewed 1005

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)?

0 Answers
Related