javascript - 选择 2 JS - 忽略 HTML 标记

Question

我正在使用Select2与 Bootstrap 。我有我的 HTML 标记，如下所示:

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="form-group">
            <label class="control-label">Student</label>
            <select class="form-control" name="student_id" id="student" style="width: 100%;">
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <div class="help-block with-errors"></div>
        </div><!-- /.form-group -->
    </div><!-- /.col-lg-12 -->
</div><!-- /.row -->
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="form-group">
            <label>Firstname</label>
            <input name="firstname" value="" class="form-control form__input" placeholder="First Name" data-error="Please enter a first name" required>
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <div class="help-block with-errors"></div>
        </div><!-- /.form-group -->
    </div><!-- /.col-lg-12 -->
</div><!-- /.row -->

当我运行 jQuery 初始化时，它会生成并破坏 HTML。

$('#student').select2(
    {
        placeholder: "Search For A Student",
        tokenSeparators: [','],
        ajax: {
            url: '/search/students/'+school_id+'',
            dataType: 'json',
            delay: 250,
            data: function (params)
            {
                return {
                    q: params.term, // search term
                };
            },
            processResults: function (data, params)
            {
                // parse the results into the format expected by Select2
                // since we are using custom formatting functions we do not need to
                // alter the remote JSON data, except to indicate that infinite
                // scrolling can be used
                params.page = params.page || 1;

                return {
                    results: $.map(data, function (item)
                    {
                        return {
                            id: item.id,
                            text: item.name
                        }
                    })
                };
            },
            cache: true
        },
        escapeMarkup: function (markup) { return markup; }, // let our custom formatter work
        minimumInputLength: 3
    }
)

请参阅随附的屏幕截图

它生成的 HTML 如下:

<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        <div class="form-group">
            <label class="control-label">Student</label>
            <select class="form-control select2-hidden-accessible" name="student_id" id="student" style="width: 100%;" tabindex="-1" aria-hidden="true">            
            <!-- /.form-group -->
            <!-- /.col-lg-12 -->
            <!-- /.row -->
           Firstname
            </select>
            <span class="select2 select2-container select2-container--default" dir="ltr" style="width: 100%;">
                <span class="selection">
                    <span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="false" tabindex="0" aria-labelledby="select2-student-container">
                        <span class="select2-selection__rendered" id="select2-student-container">
                            <span class="select2-selection__placeholder">Search For A Student</span>
                        </span>
                        <span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span>
                    </span>
                </span>
                <span class="dropdown-wrapper" aria-hidden="true"></span>
            </span>
            <input name="firstname" value="" class="form-control form__input" placeholder="First Name" data-error="Please enter a first name" required="">
            <span class="glyphicon form-control-feedback" aria-hidden="true"></span>
            <div class="help-block with-errors"></div>
        </div><!-- /.form-group -->
    </div><!-- /.col-lg-12 -->
</div>

有人知道这个问题的解决办法吗？或者过去遇到过类似的问题？

谢谢

Answer 1

我还没有测试过它，但我看到，您没有在 html 标记中关闭学生的 select 框。也许这有帮助。

<select class="form-control" name="student_id" id="student" style="width: 100%;"></select>