title: Materialize CSS (with django) dropdown form not working
body: <p>I'm trying to create a form in which the user choices an instance of model object (Invoice) already saved in the database and submits. I've tried to initialize the JS, but have little experience working with JS in html so I'm not totally sure I'm doing it right.</p>
  
  <p>Right now the below code does not render anything besides the submit button in the form. I have tried adding a random input field (worked) and tried unpacking and rendering the "invoices" context as raw text on the same page (also worked) so I think I've narrowed the issue down to it being the form choices.</p>
  
  <p><strong>header.html</strong></p>
  
  <pre><code>&lt;head&gt;
      {% load static %}
  
      &lt;!-- Compiled and minified JavaScript --&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
      &lt;!-- Compiled and minified CSS --&gt;
      &lt;meta name = "viewport" content = "width = device-width, initial-scale = 1"&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css"&gt;
      &lt;link rel = "stylesheet"
           href = "https://fonts.googleapis.com/icon?family=Material+Icons"&gt;
      &lt;script type = "text/javascript"
           src = "https://code.jquery.com/jquery-2.1.1.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
        $(document).ready(function(){
          $('select').formSelect();
        });
      &lt;/script&gt;
  &lt;/head&gt;
  
  
  &lt;body&gt;
    &lt;nav&gt;
      &lt;div class="nav-wrapper"&gt;
        &lt;a href="#" class="brand-logo"&gt;Elb&lt;/a&gt;
        &lt;ul id="nav-mobile" class="right hide-on-med-and-down"&gt;
          &lt;li&gt;&lt;a href="/bulk_invoice_upload/"&gt;Invoice Upload&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="/bulk_inventory_upload/"&gt;Inventory Upload&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
    {% block content %}
    {% endblock %}
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>form.html</strong></p>
  
  <pre><code>{% extends 'main/header.html' %}
  &lt;body&gt;
  {% block content %}
  &lt;br&gt;
  &lt;br&gt;
  &lt;form method="POST"&gt;
      {% csrf_token %}
      &lt;label for="invoice"&gt;Invoice&lt;/label&gt;
      &lt;select id="invoice" name="invoice"&gt;
          &lt;option class=browser-default value="" disabled selected&gt;Choose invoice&lt;/option&gt;
          {% for invoice in invoices %}
          &lt;option class=browser-default value="{{ invoice }}"&gt;{{ invoice }}&lt;/option&gt;
          {% endfor %}
      &lt;/select&gt;
      &lt;br&gt;&lt;br&gt;
      &lt;input type="submit" value="Save" /&gt;
  &lt;/form&gt;
  {% endblock content %}
  &lt;/body&gt;
  </code></pre>
  
  <p><strong>views.py</strong></p>
  
  <pre><code>def inventory_upload(request):
      if request.user.username == 'admin':  # Check that user is authorized
          if request.method == 'POST':  # Render HTML of results page returned to user
              ...do something and return to user...
          else:  # Initial html display to user
              invoices = Invoice.objects.all()
              inventory = get_inventory_from_sheet()
              form = BulkInventoryUpload
              return render(request=request,
                            template_name='form.html',
                            context={'invoices': invoices, 'inventory': inventory, 'form': form})
      else:  # Bounce user back to homepage if not authorized
          return redirect('main:homepage')
  </code></pre>
  
  <p><strong>forms.py</strong></p>
  
  <pre><code>from django import forms
  from django.forms import formset_factory
  from django.contrib.auth.forms import UserCreationForm
  from django.contrib.auth.models import User
  from .models import Invoice
  
  
  class BulkInventoryUpload(forms.Form):
      invoice = forms.CharField(label='invoice', max_length=150)
  
      def get_invoice(self, commit=True):
          invoice = self.cleaned_data['invoice']
          return invoice
  </code></pre>