Danh sách thả xuống đã chọn không hoạt động với Modal

Question

Tôi đang cố gắng lấy danh sách chọn/thả xuống của jQuery Chọn để làm việc trong một phương thức Bootbox. Tôi có hầu như cùng một mã chính xác làm việc trên một trang HTML chuẩn, vì vậy tôi nghĩ rằng nó sẽ được thẳng về phía trước để chỉ cần bật danh sách của tôi vào một phương thức. Tôi tạo các div của tôi và chọn các đối tượng theo phương thức, sau đó sau khi được hiển thị, tôi gọi Chosen:

div.on("shown", function() { 
    $(".chzn-select").chosen(); 
    $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
    myApp.init(); 
}); 

Sau này, có vẻ như bị hỏng. Các mục được chọn có màu xám - Tôi không thể nhấp vào chúng.

Bên trong myApp.init(), tôi điền các mục đã chọn và nó hoạt động.

Đằng sau hậu trường cho các phương thức, tôi có thể thấy rằng các thùng chứa Chosen dường như đã khởi tạo, nhưng nó không chuyển các tùy chọn chọn cho chzn thả div. Trong hình ảnh, các kết quả chzn-UL nên được lấp đầy với các tùy chọn. Dưới đây là phiên bản phương thức:

Dưới đây là những gì nó sẽ giống như thế, từ phiên bản HTML:

Trong phiên bản HTML, mã của tôi là ở dưới cùng của thẻ nội dung (tương tự như các tùy chọn chọn được phổ biến trong myApp.init()), và nó có vẻ hoạt động tốt. Thứ tự cuộc gọi có vẻ giống hệt nhau ...

$(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
$(document).ready(function(){ 
    myApp.init(); 
}); 

Đây không chỉ là vấn đề chỉ số z - tôi đã chơi đùa với điều đó mà không có may mắn. Nó có vẻ như bên trong phương thức, plugin Chosen là bằng cách nào đó nhận được bối rối và không ràng buộc hoặc cập nhật, mặc dù nó đã khởi tạo đúng cách. Tôi không chắc cách khắc phục sự cố và không thể tìm thấy người khác có cùng vấn đề ... điều này khiến tôi nghĩ rằng đó có thể là vấn đề về thời gian (nhưng tại sao nó hoạt động trong HTML?) Hoặc tôi đang làm điều gì đó ngu ngốc có thể). Có ai có bất cứ đề nghị về nơi để tìm hoặc những gì là sai?

Cảm ơn!

============================

Thêm HTML cho đầu vào chọn (mỗi câu hỏi Christopher)

Đối với cả hai phiên bản, tôi cư chọn với đoạn mã sau (phiên bản chỉnh sửa của những gì có trong myApp.init()):

$.ajax call to a RESTful URL 

var callbackSuccess = function(data){ 
    if (data) { 
    populateDropDownById(data, 'objectiveBanks'); 

     //Other things 
    } 
}; 

function populateDropDownById(data, elementId) { 
    $('#' + elementId).append('<option value = "null"> -- Select -- </option>'); 
    $.each(data, function(id, bean) { 
    var name = bean.displayName.text; 
    var id = bean.id; 
     $('#' + elementId).append('<option value =' + id + '>' + name + '</option>'); 
    }); 
} 

các yếu tố thực tế bản thân như sau. Trong phiên bản phương thức không làm việc:

var obj_banks_select = $('<select id="objectiveBanks" name="objectiveBank" onchange="populateObjectives()" tabindex="2"></select>') 
          .addClass('chzn-select') 
          .css({ 
           'width': '330px', 
           'display': 'none' 
          }); 

Và trong phiên bản HTML làm việc:

<div id="objectiveBanksWrapper">  
     <span id="objectiveBanksLabel" class="label"></span> 
     <select id="objectiveBanks" name="objectiveBank" onchange="populateObjectives()" class="chzn-select" tabindex="2" style="width: 330px; display: none;"></select> 
     <span id=objectiveBanksLoader class="dropDownLoader"></span> 
    </div> 

Answer 1

Tôi không thể chính xác cho biết những gì vấn đề là không nhìn thấy cấu trúc mã thực tế của bạn, nhưng nói chung tôi nghĩ đó là một ý tưởng tốt để cư trú bạn chọn trước khi khởi tạo các plugin, vì vậy cách tiếp cận tốt nhất sẽ là thêm khởi tạo plugin trên các yếu tố của bạn trong gọi lại ajax của bạn sau khi các tùy chọn đã được thêm vào.

var callbackSuccess = function(data){ 
    if (data) { 
     populateDropDownById(data, 'objectiveBanks'); 
     $(".chzn-select").chosen(); 
     $(".chzn-select-deselect").chosen({allow_single_deselect:true}); 
     //Other things 
    } 
}; 

Nếu bạn cần thêm tùy chọn để <select> yếu tố của bạn sau khi các plugin được khởi tạo, bạn cần phải kích hoạt các sự kiện chosen:updated trên sân, ví dụ:

$(.chzn-select").trigger("chosen:updated"); 

Answer 2

Tôi đã có một vấn đề tương tự với một lựa chọn trên trang đầu tiên, và sau đó tôi sẽ mở một phương thức, và sau đó cuộc gọi đến $(). selected() sẽ dẫn đến một lỗi javascript.

Nguyên nhân là trang đầu tiên bao gồm jquery.js và do đó đã làm phương thức. Sau khi loại bỏ jquery.js bao gồm từ phương thức, vấn đề đã được giải quyết.