-1

我有以下表格：

                    <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 函数引起的，因为当我将其注释掉时，它就像一个魅力。

4

1 回答 1

1

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

 $('#dropdown2').append('<option></option>' + obj[$(this).val()]);
于 2013-09-25T18:05:39.133 回答