javascript - Jquery-chosen 不适用于 ajax 附加选择

Question

我遇到了一个关于Jquery-Chosen 的奇怪问题。我在弹出窗口 中有一个多选框，其选项 是使用ajax 调用填充的。不幸的是，Jquery-Chosen 没有处理它。但如果我在同一个地方使用静态多选框，它就可以正常工作。我在谷歌上搜索了很多，但找不到解决方案。

以下是我的 HTML 代码 -

<select multiple class="tid form-control assign_teacher_dropdown" name="assign_teacher[]">
</select>

以下是我的 Jquery 代码 -

$.ajax({
    url: '/getclass/'+id,
    type: 'get',
    dataType: 'json',
    success: function (response) {
        if(response.status == '200') { 
            var class_info = response.class;                   
            var teacher_info = class_info.teacher;
            $('.assign_teacher_dropdown').empty();
            $('.ttterm_dropdown').empty();
            if(!teacher_info){
                $('.assign_teacher_dropdown').append('<option value="">Please select one</option>');
            }
            $('.class-id').val(class_info.id);
            $('.class-name').val(class_info.class_name);
            $('.class-code').val(class_info.class_code);
            $('.start-date').val(class_info.start_date);
            $('.end-date').val(class_info.end_date);
            var teacherDropdown = '';
            $.each(response.teachers, function( index, value ) {
                var optionSelected = '';
                if(teacher_info) {
                    if(response.selected_teacher.indexOf(index) !=-1){
                        var optionSelected = 'selected';                            
                    }
                }
                teacherDropdown = '<option '+optionSelected+' value="'+index+'">'+value+'</option>';
                $('.assign_teacher_dropdown').append(teacherDropdown);

            });

            $.each(response.terms, function( index, term ) {
                var optSelected = '';
                if(term) {
                    if(index == class_info.term_id){
                        var optSelected = 'selected';
                    }
                }
                var termDropdown = '<option '+optSelected+' value="'+index+'">'+term+'</option>';
                $('.tterm_dropdown').append(termDropdown);
            });

            $('.chosen-container-single-nosearch').hide();
            $('.assign_teacher_dropdown').show();
            $('.tterm_dropdown').show();
            $('#class-update-modal-update').modal('show');
        }
        else {
            validation.html(getMessage(response.message, 'danger'));
        }
        window.scrollTo(0, 0);
        $(".chosen-select").chosen(); ////for static multi select which is working fine
        $('.assign_teacher_dropdown').chosen(); ////it is not working
    }
});

响应-

response.teachers = Object { 2ee71930-70f9-11e7-8040-0744cf2f827d: "Raihan2 Razi2", 47e2f900-6c7d-11e7-98d2-ebfd03a47749: "Teacher -1", 5873df40-7028-11e7-a3a6-4b6f2ca6ed6b: "Teacher Akter", 0ad51850-7107-11e7-a380-8b0b33c8ce62: "Rakib-3 Hasan-3", 63cd0d30-7105-11e7-b09d-a7232d9caeba: "Rakib-2 Hasan-2", 6c2ab790-70f7-11e7-a4f5-aba1de53d767: "Raihan1 Razi1", a6a47520-70f3-11e7-85e1-d760ee2c8a38: "Raihan Razi", 331ba070-7114-11e7-bdd1-2107af6559b4: "Rakib-4 Hasan-4", cbf1d490-7028-11e7-bab1-97745facf387: "Teacher Mizan" }
teacher_info = {id: "5873df40-7028-11e7-a3a6-4b6f2ca6ed6b", email: "akter@wearedando.com", first_name: "Teacher", last_name: "Akter", dob: null, …}

输出-

注意:多选位于模态框内。

注意:静态多选在同一位置可以正常工作。

非常感谢任何帮助。提前致谢。

到目前为止我已经尝试过 -

1. 获取变量中的所有选项并使用.html()而不是附加
2. 尝试分配动态类以及 .assign_teacher_dropdown 并在该动态类上调用 .chosen()。
3. 将 .chosen() 与 ajax 调用分开，并使用单独的函数调用它。

Answer 1

它不起作用的原因是因为在添加任何选项之前在动态创建的弹出窗口上调用了函数 chosen()。当您使用 $.each 函数时，它会立即返回并异步调用谓词函数。在调用 chosen()

之前，您需要等到所有选项都已添加

或者您可以在添加选项之前使用他们的动态 API$("#form_field").trigger("chosen:updated");