Question

我正在使用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>中保留选定的值？

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

提交失败后保留选定的选项

1 个答案: