代码之家 › 专栏 › 技术社区 › ahmet

基于所选下拉列表的django和ajax下拉列表

drop-down-menu django ajax

ahmet · 技术社区 · 7 年前

以下是我迄今为止所做的:

project_下拉列表_options.html:

<option value="">---------</option>
{% for sw in result %}
<option value="{{ sw.pk }}">{{ sw.pk  }}</option>
{% endfor %}

view.py:(我检查了得到值的结果。)

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})

url.py

path('ajax/projects-sw/', views.projects_dropdown, name='ajax_projects_dropdown'),

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    $("#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);  
        }
      });

    });
  </script>

html页面,其中下拉列表为:

<select name="projects">
 {% for instance in projects%}
 <option value={{ instance.id }}>{{ instance.project_title }}</option>
 {% endfor %}</td>
  <td>
    <form method="post" id="personForm" projects-drop-url="{% url 'ajax_projects_dropdown' %}" novalidate>
    {% csrf_token %}
    <select name="sw" id="sw">
    <option value="">Switch Type</option>
  </td>
  </form>

我想我在Ajax脚本或下拉菜单所在的html部分出错了。知道我在哪里出错了吗?我没有得到任何错误,在第二个dropdowsn菜单(称为“sw”)中没有得到任何值,我得到的是第一个下拉菜单的值。

1 回复 | 直到 7 年前

ahmet 7 年前

您正在使用 values 方法,并且仅发送 swtype project_dropdown_options.html

价值观

result = SWTypes.objects.filter(proje=int(id))

pk 以及 价值观

result = SWTypes.objects.filter(proje=int(id)).values('pk', 'swtype')

QuerySet 到 list ,也可以在模板中循环查询集

<option value="">---------</option>
{% for sw in result %}
   <option value="{{ sw.pk }}">{{ sw.swtype }}</option>
{% endfor %}

使现代化

name id 身份证件 $("#projects").change

 <td>
   <!-- add id in place of name -->
   <select id="projects">
    {% for instance in projects%}
      <option value={{ instance.id }}>{{ instance.project_title }}</option>
    {% endfor %}
   </select>
 </td>
 <td>
    <form method="post" id="personForm" projects-drop-url="{% url 'ajax_projects_dropdown' %}" novalidate>
      {% csrf_token %}
      <select name="sw" id="sw">
         <option value="">Switch Type</option>
      </select>
    </form>
 </td>

更新2

更改ajax调用,删除 data 将URL本身作为查询参数,并使用文档 on 事件

$(document).on('change', 'select#projects', function () {
  var url = $("#personForm").attr("projects-drop-url");  
  var id = $(this).val();

  console.log("urls and project_id", url, id);

  $.ajax({
     type: "GET",
     url: url + "?id="+ id,
     success: function (data) {   
        $("#sw").html(data);  
     }
  });

});