Выбранный выпадающий список не работает с Modal

Question

Я пытаюсь получить список выбора/выпадающего списка jQuery Chosen для работы в модальном модуле Bootbox. У меня почти такой же точный код, который работает на стандартной HTML-странице, поэтому я подумал, что будет просто просто поместить мой список в модальный. Я произвожу мои дивы и выбрать объекты в модальных, а затем после того, как «показано», я называю Chosen:

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

После этого, Избранный, кажется, сломана. Элементы выбора выделены серым цветом - я не могу их нажимать.

Внутри myApp.init() я заполняю выбранные элементы, и он работает.

За кулисами модальным, я могу видеть, что выбранный контейнер, кажется, инициализирован, но не переносит выбора опций на ЧЦЗ капли дел. На изображении chzn-results UL должны быть заполнены опциями. Вот версия модальный:

Вот что она должна выглядеть, из HTML версии:

В HTML версии, мой код в нижней части тела тега (аналогично в некоторых вариантах заселены в myApp.init()), и, похоже, это работает нормально. Порядок вызовов, кажется, идентичны ...

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

Это не только вопрос г-индекса - я уже играл с этим не повезло. Кажется, что внутри модального, Chosen плагин каким-то образом запутался и не привязан или обновлен, хотя он был правильно инициализирован. Я не уверен, как устранить проблему и не могу найти других людей с одинаковой проблемой ... это заставляет меня думать, что это может быть проблема времени (но почему это работает в HTML?), Или я делаю что-то глупое (очень вероятно). Кто-нибудь есть предложения о том, где искать или что не так?

Спасибо!

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

Добавление HTML для отдельных входов (на каждый вопрос Кристофера)

Для обеих версий, я заселить выберите с помощью следующего кода (отредактированную версию о том, что в 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>'); 
    }); 
} 

фактические элементы сами по себе являются следующие. В нерабочем модальной версии:

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

И в рабочей версии HTML:

<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

Я не могу точно сказать, что эта проблема не видя реальную структуру кода, но в целом я думаю, это хорошая идея, чтобы заполнить выбранные вами элементы перед инициализацией плагина, поэтому лучшим подходом было бы добавить инициализацию плагина в свои элементы в обратном вызове ajax после добавления параметров.

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

Если вам нужно добавить опции к вашим <select> элементов после того, как плагин инициализации, вы должны были бы вызвать chosen:updated событие на поле, например:

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

Answer 2

У меня была аналогичная проблема с выбором на первой странице, а затем я открою модальный, а затем вызов метода $(). selected() приведет к ошибке javascript.

Причина в том, что первая страница включала jquery.js, а также модальный. После удаления jquery.js включить из модального, проблема была решена.