title: django and ajax dropdown based on selected dropdown
body: <p>I am trying to do a dropdown menu based on the selected dropdown and filter these results.</p>
  
  <p>Here what I  did so far:</p>
  
  <p>project_dropdown_options.html:</p>
  
  <pre><code>&lt;option value=""&gt;---------&lt;/option&gt;
  {% for sw in result %}
  &lt;option value="{{ sw.pk }}"&gt;{{ sw.pk  }}&lt;/option&gt;
  {% endfor %}
  </code></pre>
  
  <p>view.py: (I checked the result I am getting values.)</p>
  
  <pre><code>def projects_dropdown(request):
      id = request.GET.get('id')
      print(id)
      result = list(SWTypes.objects.filter(proje=int(id)).values('swtype'))
      return render(request, 'project_dropdown_options.html', {'result': result})
  </code></pre>
  
  <p>url.py</p>
  
  <pre><code>path('ajax/projects-sw/', views.projects_dropdown, name='ajax_projects_dropdown'),
  </code></pre>
  
  <p>Ajax script:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-3.3.1.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      $("#projects").change(function () {
        var url = $("#personForm").attr("projects-drop-url");  
        var id = $(this).val();  // get the selected projectID from the HTML input
  
        $.ajax({                       // initialize an AJAX request
          url: url,                   
          data: {
            'id': id       // add the project id to the GET parameters
          },
          success: function (data) {   
            $("#sw").html(data);  
          }
        });
  
      });
    &lt;/script&gt;
  </code></pre>
  
  <p>html page where the dropdown is:</p>
  
  <pre><code>&lt;select name="projects"&gt;
   {% for instance in projects%}
   &lt;option value={{ instance.id }}&gt;{{ instance.project_title }}&lt;/option&gt;
   {% endfor %}&lt;/td&gt;
    &lt;td&gt;
      &lt;form method="post" id="personForm" projects-drop-url="{% url 'ajax_projects_dropdown' %}" novalidate&gt;
      {% csrf_token %}
      &lt;select name="sw" id="sw"&gt;
      &lt;option value=""&gt;Switch Type&lt;/option&gt;
    &lt;/td&gt;
    &lt;/form&gt;
  </code></pre>
  
  <p>I think I have error either with Ajax script or the html part where the dropdown menu is.Any idea where I am doing which error ? I am getting no error and I am getting no values at the second dropdowsn menu which is called "sw" and I am getting values of the first dropdown.</p>