如何以Django形式显示依赖下拉列表 | 如何以Django形式显示依赖下拉列表

本文介绍了如何以Django形式显示依赖下拉列表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

在此处从模板添加学生费用信息时，如果用户选择了某门课程，那么在选择费用选项中仅应显示该所选课程的basic_price和advanced_price.我如何实现此目的?

Here while adding the student fee information from template if a user select some course then only this selected course's basic_price and advanced_price should displayed in the select fee option.How can i achieve this ?

student_fee.html

     <div class="form-group">
        <h5>Course <span class="text-danger">*</span></h5>
        <div class="controls">
         <select name="course" id="personForm" data-fees-url="{% url 'students:ajax_load_course_fees' %}" required class="form-control">
        <option value="">Select Course</option>
                        {% for course in courses %}
        <option value="{{course.id}}">{{course.title}}</option>
                        {% endfor %}
       </select>
        </div>
       </div>
      <div class="form-group">
        <h5>Total Fee <span class="text-danger">*</span></h5>
            <div class="controls">
             <select name="total_fee" id="select3" required class="form-control">
              <option value="">Select Fee</option>
            </select>
         </div>
       </div>

推荐答案

您需要创建一个新函数，该函数将返回特定于课程的费用，但从ajax调用

You need to create a new function that will return the fees specific to a course, but called from ajax

def ajax_course_fees(request):
    course = Course.objects.get(pk=request.GET.get('course_pk'))
    #generate an html template for the specific option
    return render(request, 'fees_dropdown_list_options.html', {'course': course})

关联模板:

fees_dropdown_list_options.html

<option value="">Select Fee</option>
<option value="{{course.basic_price}}">{{course.basic_price}}(Basic)</option>
<option value="{{course.advanced_price}}">{{course.advanced_price}}(Advanced)</option>

在urls.py中添加以下内容:

In urls.py add this:

 path('ajax/load-course-fees/', views.ajax_course_fees, name='ajax_load_course_fees'),

默认情况下，您需要在模板中删除费用，这些费用将从每个课程的ajax调用中动态加载

In your template you need to remove the fees by default, they will be dynamically loaded from ajax call for each Course

我提供了Jquery来进行ajax调用.

And I provide the Jquery to make the ajax call.

<select name="course" id="select2" data-fees-url="{% url 'ajax_load_course_fees' %}" required class="form-control">
    <option value="">Select Course</option>
        {% for course in courses %}
            <option value="{{course.id}}">{{course.title}}</option>
        {% endfor %}
</select>
<select name="total_fee" id="select3" required class="form-control">
    <option value="">Select Fee</option>
</select>


 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script>
    $("#select2").change(function () {
      var url = $("#select2").attr("data-fees-url");  // get the url of the ajax_load_course_fees view
      var course_pk = $(this).val();  // get the selected course pk from the HTML input

      $.ajax({                       // initialize an AJAX request
        url: url,                    // set the url of the request
        data: {
          'course_pk': course_pk       // add the course pk to the GET parameters
        },
        success: function (data) {   // `data` is the return of the `ajax_course_fees` view function
          $("#select3").html(data);  // replace the contents of the fees select with the data that came from the server
        }
      });

    });
  </script>

为您提供信息: https://simpleisbetterthancomplex.com/tutorial/2018/01/29/how-to-implement-dependent-or-chained-dropdown-list-with-django.html

这篇关于如何以Django形式显示依赖下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！