Bootstrap Multiselect Integration with WTForms

Question

I'm new to WTForms and was wondering how to integrate a bootstrap styled multiselect like this one http://davidstutz.github.io/bootstrap-multiselect/ into WTForms.

I know I can write the HTML directly to create the multiselect dropdown form but I'd rather work with WTForm objects to keep my forms consistent. Is there a simple way to convert the WTForms SelectMultipleField class into a dropdown multiselect box? Or is something more sophisticated needed?

Thanks!

Answer 1

I'd recommend a hybrid approach: Write the JavaScript yourself but let WTForms do the HTML part: Create a normal SelectMultipleField and on rendering call it like this: form.select_multiple(class_='multiselect') . Because the plugin itself just required valid HTML and something to select such a select field to apply its JavaScript part (which you can include on the page).

Of course, if you want more advanced stuff, you can always subclass the widget for the SelectMultipleField and extend it. Then use this as the custom widget (For example on the iconized part of the examples you linked).

Really, on the part of WTForms you don't need much modification.