Django从相关下拉列表中显示多个值答案

【问题标题】：Django Display Multiple Values from Dependent DropdownDjango从相关下拉列表中显示多个值
【发布时间】：2021-05-07 20:35:54
【问题描述】：

我正在使用 Python 3.8 和 Django 3.0，并且需要多个值（音量和音量大小）才能转到相关下拉列表。我已经能够使用单个值（音量）填充相关下拉列表。我发现了可以使用下拉菜单的帖子 sending multiple values from django dropdown 和 retrieve multiple values from Dropdown menu in Django 但这些不适用于依赖下拉菜单。这是我的代码：

models.py

class ArrayVolumes(models.Model):
    array = models.ForeignKey(Array, on_delete=models.CASCADE)
    volume = models.CharField(max_length=50, default=None)
    vol_size = models.CharField(max_length=10, default=None)
    def __str__(self):
        return self.volume

views.py

from .models import ArrayVolumes

def load_volumes(request):
    array_id = request.GET.get('array')
    vols = ArrayVolumes.objects.filter(array_id=array_id).order_by('volume')
    # vol_size = ArrayVolumes.objects.filter(array_id=array_id).value('vol_size')
    return render(request, 'pure/volume_dropdown_list_options.html', {'vols': vols})

urls.py

urlpatterns = [
 path('ajax/load-volumes/', views.load_volumes, name='ajax_load_volumes'),
]

dropdown_list_options.html

<option value="">---------</option>
{% for vol, size in vols %}
<option value="{{ vol.pk }}#{{ size }}">{{ vol.volume }} ( {{ size.vol_size }} )</option>
{% endfor %}

main.html

{% extends "base.html" %}
{% load crispy_forms_tags %}

{% block content %}

<div class="container">

{% crispy form form.helper %}
<form method="post" id=volForm data-volumes-url="{% url 'ajax_load_volumes' %}" novalidate>
<br><br>
<h4>{{ note }}</h4>
</form>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
    $("#id_array").change(function () {
        var url = $("#volForm").attr("data-volumes-url");
        var arrayId = $(this).val();

        $.ajax({
        url: url,
        data: {
            'array': arrayId
        },
        success: function (data) {
            $("#id_volume").html(data);
        }
        });

    });
    </script>
{% endblock %}

【问题讨论】：

标签： html python-3.x django ajax

【解决方案1】：

我发现了这个问题。我需要传递所有ArrayVolumes.objects，然后在HTML 文件中使用vol.volume 和vol.vol_size 遍历这些项目。以下是我的修改：

views.py

def load_volumes(request):
    array_id = request.GET.get('array')
    vols = ArrayVolumes.objects.filter(array_id=array_id)
    return render(request, 'pure/volume_dropdown_list_options.html', {'vols': vols})

dropdown_list_options.html

<option value="">---------</option>
{% for vol in vols %}
<option value="{{ vol.pk }}">{{ vol.volume }} ( {{ vol.vol_size }} )</option>
{% endfor %}

【讨论】：