Question

我有以下表格：

                    <div class="form-group">
                    <label class="control-label">Product</label>
                    <div class="controls">
                        <select class='dropdown' style="width:50%" id="dropdown1" name="dropdown1" required="required">
                            <option></option>
                            <?php echo $q1; ?> 
                        </select>
                        <span class="help-block">This is a description</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">Issue</label>
                    <div class="controls">
                        <select class='dropdown' style="width:50%" id="dropdown2" name="dropdown2" required="required">
                        </select>
                        <span class="help-block">This is a description</span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label">Issue</label>
                    <div class="controls">
                        <select class='dropdown' style="width:50%" id="dropdown3" name="dropdown3" required="required">
                        </select>
                        <span class="help-block">This is a description</span>
                    </div>
                </div>

以及以下javascript：

<script>
//Support
$(document).ready(function() {
    var obj = $.parseJSON('<?php echo $all; ?>');

    $("#add_ticket_form").validate({
        errorClass: "help-inline",
        errorElement: "span",
        highlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').addClass('has-error');
        },
        unhighlight: function(element, errorClass, validClass) {
            $(element).parents('.form-group').removeClass('has-error');
            $(element).parents('.form-group').addClass('has-success');
        }
    });

    $("select").select2({

    });

    $("#dropdown1").change(function() {
        $('#dropdown2').find('option').remove().end();
        if (obj[$(this).val()] !== undefined)
        {
            $('#dropdown2').append(obj[$(this).val()]);
            $('#dropdown2').rules('add', 'required');

        }
        else
        {
            //$('#dropdown2').attr('disabled', true);
            //$('#dropdown2').attr('required', false);
        }

    });
    $("#dropdown2").change(function() {
        $('#dropdown3').find('option').remove().end();
        if (obj[$(this).val()] !== undefined)
        {
            $('#dropdown3').attr('disabled', false);
            $('#dropdown3').rules('add', 'required');
            $('#dropdown3').append(obj[$(this).val()]);

        }
        else
        {
            $('#dropdown3').attr('disabled', true);
            $('#dropdown3').attr('required', true);
        }

    });

});

当我尝试验证表单时，如果没有触及下拉列表，验证器会突出显示每个表单都说它们是必需的。然而，当我触摸第一个下拉列表并更改其值并单击按钮时，它表示第一个和第二个下拉列表是正确的，只有第三个是不正确的。看起来这个问题是由.append函数引起的，因为当我评论它时，它就像一个魅力。

Answer 1

看起来.append会导致列表中的第一个元素自动选择应用jquery select2时不可见的内容。使函数添加空元素可以解决问题：

 $('#dropdown2').append('<option></option>' + obj[$(this).val()]);

使用.append和jquery validate后无法验证下拉列表

1 个答案: