Question

我在我自己的环境中实现了上述功能（其中的各个部分都记录了这些！）但是根本无法让它正常工作。我在web pape只渲染为没有选择框的提交按钮的阶段。

我需要一个模型表单，其中有一个选择框，我填充了一个选项列表，然后是另一个选择框，它根据选择框的选定项目通过jquery填充。一个render_to_对模板的响应的视图，并使用http post / get方法使用jquery函数填充第二个选择框，然后将这两个值保存到模型中定义的模型的两个字段中。

我意识到这是具体的（但我并没有试图让某人为我做我的工作！）对我来说，看到另一种实施方法是非常有用的。只是进入cirlces。

如果你有时间，那么我非常感谢你的方法的运行 - 最好是一些源代码。如果您想查看我的任何代码，请询问。

谢谢！

Answer 1

你可以简单地做这样的事情：

<强> template.html

<form action="/your-name/" method="post">
    {% csrf_token %}
    {{ form }}
    <input type="submit" value="Submit" />
</form>

在加载页面期间填充此部分。（由Django提供）

<强> forms.py

class MyForm(forms.Form):
    ...
    sort1 = forms.ChoiceField(choices=(('0', 'All'), ('1', '...'), ...), initial='0', required=True, widget=forms.Select(attrs={'class': 'sort-select', 'id': 'sort1'}))
    sort2 = forms.ChoiceField(choices=(('0', ''), ), required=True, widget=forms.Select(attrs={'class': 'sort-select', 'id': 'sort2'}))

以下是您为第一个列表指定内容的表单，以及仅包含一个默认项目的第二个列表。

<强>的main.css

.sort-select#sort2 { display: none; }

<强> views.py

from simplejson import dumps, loads

def sort1_view(request):
    if request.method == 'POST':
        ...
    else:
        form = MyForm()
    return render(request, {'form': form}, 'template.html')

def sort2_view(request):
    if request.method == 'GET' and request.is_ajax():
        # Add more check over this data
        req = loads(request.body)
        data = dumps(modellist2.objects.filter(parent_list=req['parent_list']))
        return HttpResponse(data)
    else:
        return HttpResponse(dumps({'error': 'HTTP Method error'}))

在这个文件中，我们编写了两个视图函数：第一个加载模板一次，第二个加载Ajax调用。

<强> main.js

(function() {
    $(".sort-name#sort1").change(function() {
        var sort1_id = $(this).find(':selected').val();

        // Empty the second <select>
        $('.sort-select#sort2').empty();

        // Ajax call - HTTP GET Method
        $.get('/list2/', {parent_list: sort1_id}, function(data) {
            // Append option tags to the select sort 2
            for (var i = 0; i <= data.length; i++) {
                $('.sort-select#sort2').append("<option value=" + data.id + ">" + data.value + "</option>");
            }
        });

        // Display sort 2
        $('.sort-select#sort2').show();
    });    
}).call(this);

在你的main.js中，我们只是在第一个选择标签（选择＃sort1）更改时捕获事件，获取所选项并进行Ajax调用以获取第二个列表的内容在一个参数上：这里是第一个列表的选定ID。你的Python函数sort2_view被调用（我没有实现urls.py，但它很容易做到）并返回一个包含我们的第二个列表内容的JSON字符串。它仍然可以附加到第二个 select 标记（选择。＃sort2）。

Django - 填充Drop One选择另一个

1 个答案: