Question

我正在尝试根据所选下拉菜单创建一个下拉菜单，并过滤这些结果。

这是我到目前为止所做的：

project_dropdown_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'),

Ajax脚本：

<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部分有错误。我知道我在哪里做哪个错误？我没有错误，在第二个名为“ sw”的dropdowsn菜单中也没有任何值，并且在第一个下拉菜单中有值。

Answer 1

您在QuerySet中使用values方法，并且在呈现swtype时仅在上下文中发送project_dropdown_options.html字段值

删除values方法

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

或将pk也添加到values

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

更新

也更改您的父HTML，将name中的select标签的id属性替换为id，因为您已经在$("#projects").change上附加了JQuery change事件，即 <td>  <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> < / strong>

data

更新2

更改您的ajax调用，删除id属性，并将on附加到URL本身作为查询参数，并使用文档$(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); } }); });事件

def computeComplexNumber: () ⇒ Future[Int] = () ⇒ Future { println("Computing complex number ...") Int.MaxValue } def convert(f: () ⇒ Future[Int]): Future[() ⇒ Int] = ??? convert(computeComplexNumber)

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

1 个答案: