title: Update DOM without reloading the page in Django
body: <p>I have two picklists in DOM, first is populated with initial call to a view (i.e. loading the page). Second picklist's content depends on what user selects in the first one.</p>
  <p>Let's say the picklists are:</p>
  <ol>
  <li><code>list_of_events</code></li>
  <li><code>list_of_rooms</code></li>
  </ol>
  <p>Every time the state of the first picklist changes (user selects a different event) I need to update the content of the second picklist (available rooms) without refreshing the page. Is this possible?</p>
  <p>My template looks like this:</p>
  <pre><code>{% block content %}
  
  {% if list_of_events %}
      &lt;form&gt;
          &lt;select&gt;
              {% for event in list_of_events %}
                  &lt;option value=&quot;name&quot;&gt;{{ event.title }}&lt;/option&gt;
              {% endfor %}
          &lt;/select&gt;
      &lt;/form&gt;
  
  {% else %}
      &lt;p&gt;No events available now.&lt;/p&gt;
  {% endif %}
  </code></pre>
  <p>For now the second picklist <code>list_of_rooms</code> should only be visible if user have selected anything from the <code>list_of_events</code> picklist. <code>first_selection</code> argument is passed to template if user selects a value in <code>list_of_events</code>.</p>
  <pre><code>{% if first_selection %}
      &lt;form&gt;
          &lt;select&gt;
              {% for room in list_of_rooms %}
                  &lt;option value=&quot;name&quot;&gt;{{ room.id }}&lt;/option&gt;
              {% endfor %}
          &lt;/select&gt;
      &lt;/form&gt;
  {% endif %}
  
  &lt;input type=&quot;submit&quot; value=&quot;Submit&quot;&gt;
  
  {% endblock %}
  </code></pre>
  <p>My <code>views.py</code> function looks like this:</p>
  <pre><code>def events(request):
      list_of_events = Event.objects.all()
      return render(
          request, 
          'web_service/schedule.html', {'list_of_events': list_of_events}
      )
  </code></pre>