title: Customizing a Widget for ManyToMany field to a Model that have a circular ForeignKey to itself
body: <p>I have two models Category and Products.</p>
  
  <ul>
  <li>a Product can have multiple Categories </li>
  <li>a Category can have multiple Products.</li>
  <li>Categories have a circular Foreign key, to itself.</li>
  <li>not all Categories have the same depth level</li>
  </ul>
  
  <p>Example:</p>
  
  <ul>
  <li>Category A
  
  <ul>
  <li>Category A_1</li>
  <li>category A_2
  
  <ul>
  <li>Category A_2_1</li>
  </ul></li>
  </ul></li>
  <li>Category B</li>
  <li>Category C
  
  <ul>
  <li>Category C_1</li>
  </ul></li>
  </ul>
  
  <p><strong><code>models.py</code></strong></p>
  
  <pre><code>class Product:
      categories = models.ManyToManyField(Category)
      name = models.CharField(max_length=255)
  
  class Category:
      categories = models.ForeignKey(self)
      name = models.CharField(max_length=255)
  </code></pre>
  
  <p>As Form I use a ModelForm:</p>
  
  <pre><code>class ProductForm(ModelForm):
      class Meta:
          model = Product
          fields = ['categories', 'name', 'short_description', 'description']
          widgets = {
              'categories': MyWidget,
          }
  </code></pre>
  
  <p><strong>What I want to achieve:</strong></p>
  
  <p>I want to implement a conditional select (narrow options) On Product Form creation:</p>
  
  <ol>
  <li>Only top parent Categories(level 0 A,B,C) are available</li>
  <li>The user select a parent Category.  If the parent has children a new Select box appear with his children(category level 1 A1,C1) </li>
  <li><p>The user select a level 1 Category (A1,C1). If the parent has children a new Select box appear with his children(level 2 A2)</p>
  
  <ul>
  <li>The process is repeated until no children are availavable(recursive), an user select the "smallest" category in the tree</li>
  <li>A new button is available for the user to add more categories and start the 1-3 process again</li>
  <li>I want to do the select,add new select using JavaScript</li>
  <li>On Form Submit I want to send only the last children categories</li>
  </ul></li>
  </ol>
  
  <p>Options I thought:</p>
  
  <ol>
  <li>Change the ManyToMany coresponding default Fields - looks like there are no good hooks and/or inheritance</li>
  <li>Use a non-default custom Field instean of ManytoMany(like Charfield) - more complex on clean,saving Form</li>
  <li>Change/Inherit the widget. My issues is how to send the data to the default Field on submit, and get/show it on edit </li>
  </ol>
  
  <p>Practical, let's say I have 7 Select Boxes, with the values for each: </p>
  
  <ol>
  <li>Parent1->Child11->Child111 </li>
  <li>Parent2->Child21</li>
  <li>Parent3->Child31->Child311</li>
  </ol>
  
  <p>How do I tell Django on browser submit(with other data) to send to ManyToMany the last Child in all three of them</p>
  
  <p>I can gather them with Javascript, but I have to tell Django get this data, this is what you need.</p>
  
  <p>I need some help as code and indication how to do this.</p>
  
  <p><a href="https://i.stack.imgur.com/65Zdm.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/65Zdm.jpg" alt="enter image description here"></a></p>