title: Django Forms - change the render multiple select widget
body: <p>In my model I have a manytomany field</p>
  
  <pre><code>mentors = models.ManyToManyField(MentorArea, verbose_name='Areas', blank=True)
  </code></pre>
  
  <p>In my form I want to render this as:</p>
  
  <ol>
  <li><p>drop down box with list of all
  MentorArea objects which has not
  been associated with the object.  </p></li>
  <li><p>Next to that an add button which
  will call a javascript function
  which will add it to  the object. </p></li>
  <li><p>Then under that a ul list which has
  each selected MentorArea object with
  a x next to it which again calls a
  javascript function which will
  remove the MentorArea from the
  object.</p></li>
  </ol>
  
  <p>I know that to change how an field element is rendered you create a custom widget and override the render function and I have done that to create the add button.</p>
  
  <pre><code>class AreaWidget(widgets.Select):
  
      def render(self, name, value, attrs=None, choices=()):
          jquery = u'''
          &lt;input class="button def" type="button" value="Add" id="Add Area" /&gt;'''
  
          output = super(AreaWidget, self).render(name, value, attrs, choices)
  
          return output + mark_safe(jquery) 
  </code></pre>
  
  <p>However I don't know how to list the currently selected ones underneath as a list.  Can anyone help me?  Also what is the best way to filter down the list so that it only shows MentorArea objects which have not been added? I currently have the field as</p>
  
  <pre><code>mentors = forms.ModelMultipleChoiceField(queryset=MentorArea.objects.all(), widget = AreaWidget, required=False)
  </code></pre>
  
  <p>but this shows all mentors no matter if they have been added or not.</p>
  
  <p>Thanks</p>