提交失败后保留选择的选项答案

【问题标题】：Keep the selected option after submit fails提交失败后保留选择的选项
【发布时间】：2016-03-10 00:33:30
【问题描述】：

我正在使用 django，并且有一个带有 3 个 ModelChoiceField 的表单，因此在模板中显示了 3 个 <select> 项目，但我使用 jquery 过滤要显示的选项，关系是，取决于第一个中选择的选项<select> 显示第二个<select> 的选项，并且根据在第二个<select> 中选择的选项显示第三个<select> 的选项。因此，在第一个选项中选择选项之前，要在第二个和第三个 <select> 中不显示任何内容，请使用：

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

然后要显示第二个<select> 的选项，请使用：

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

最后要显示第三个<select> 的选项，请使用此脚本：

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

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

【问题讨论】：

标签： javascript jquery html django forms

【解决方案1】：

好的，如果有人需要这样的东西，当提交失败时，我将第一个脚本更改为.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>

【讨论】：