提交失败后保留所选选项

I'm using django and have one form with 3 ModelChoiceField so in the template shows 3 <select> items but I use jquery to filter the options to show, the relationship is, depending of the option selected in the first <select> shows the options for the second <select> and depending of the option selected in the second <select> shows the options for the third <select>. So to show nothing in the second and third <select> before a option be selected in the first one use this:

我正在使用django,并且有一个带有3个ModelChoiceField的表单,所以在模板中显示3个项目,但是我使用jquery来过滤要显示的选项,关系是,根据在第一个中选择的选项显示第二个的选项,取决于在第二个中选择的选项,显示第三个的选项。因此,要在第一个选择选项之前在第二个和第三个中显示任何内容,请使用以下命令:

<script>
    $('#id_2 option:gt(0)').remove();
    $('#id_3 option:gt(0)').remove();
</script>

Then to show the options for the second <select> use this:

然后显示第二个的选项使用:

<script>
    $('#id_1').on('change', inicio);
    function inicio() {
        $('#id_2 option:gt(0)').remove();
        $('#id_3 option:gt(0)').remove();
        var id = $(this).val();
        $.ajax({
            data: { 'id': id },
            url: '/2_ajax/',
            type: 'get',
            success: function (data) {
                var k;
                var v;
                for (var i = 0; i < data.length; i++) {
                    k = data[i].pk;
                    v = data[i].fields.name;
                    $('#id_2').append('<option value=' + k + '>' + v + '</option>')
                }
            }
        })
    }
</script>

And finally to show the options for the third <select> use this script:

最后显示第三个的选项使用此脚本:

<script>
    $('#id_2').on('change', inicio);
    function inicio() {
        $('#id_3 option:gt(0)').remove();
        var id = $(this).val();
        $.ajax({
            data: { 'id': id },
            url: '/3_ajax/',
            type: 'get',
            success: function (data) {
                var k;
                var v;
                for (var i = 0; i < data.length; i++) {
                    k = data[i].pk;
                    v = data[i].fields.name;
                    $('#id_3').append('<option value=' + k + '>' + v + '</option>')
                }
            }
        })
    }
</script>

But I have a TextInput that have a validator to only accept more of 10 digits so if the user submit the form but the input have less of 10 digits the submits fails and shows a message in the field, all the other fields keep the data that the user fills except for my second and third <select>they show nothing even when the first one still have the selected option. How can I keep the values selected in the second and third <select> when the submit fails?

但我有一个TextInput有一个验证器只能接受10个数字的更多数字,所以如果用户提交表单但输入少于10位,提交失败并在字段中显示一条消息,所有其他字段保留数据用户填充除了我的第二个和第三个,即使第一个仍然具有所选选项,它们也不会显示任何内容。如何在提交失败时保留在第二个和第三个中选择的值?

1 个解决方案

#1

Ok if someone need something like this I change the first script to act like the sencond and third scripts in the .ready() when the submit fails.

好的,如果有人需要这样的东西,我会在提交失败时将第一个脚本更改为.ready()中的第二个和第三个脚本。

<script>
    $(document).ready(function () {
        if ($('#id_1').val() == "") {
            $('#id_2 option:gt(0)').remove();
            $('#id_3 option:gt(0)').remove();
        } else {
            $("#id_2").children('option:gt(0)').hide();
            var id = $('#id_1').val();
            $.ajax({
                data: { 'id': id },
                url: '/2_ajax/',
                type: 'get',
                success: function (data) {
                    var k;
                    var v;
                    for (var i = 0; i < data.length; i++) {
                        k = data[i].pk;
                        v = data[i].fields.name;
                        $('#id_2').append('<option value=' + k + '>' + v + '</option>')
                    }
                }
            })//.ajax for 2
            if ($('#id_2').val() == "") {
                $('#id_3 option:gt(0)').remove();
            } else {
                $("#id_3").children('option:gt(0)').hide();
                var id = $('#id_2').val();
                $.ajax({
                    data: { 'id': id },
                    url: '/3_ajax/',
                    type: 'get',
                    success: function (data) {
                        var k;
                        var v;
                        for (var i = 0; i < data.length; i++) {
                            k = data[i].pk;
                            v = data[i].fields.name;
                            $('#id_3').append('<option value=' + k + '>' + v + '</option>')
                        }
                    }
                })// .ajax for 3
            }// else id_2
        }// else id_3
    });// .ready
</script>