twitter-bootstrap – 选择不与Modal一起使用的下拉列表

我试图让一个jQuery选择/下拉列表在Bootbox模式中工作.我在标准 HTML页面上的代码几乎完全相同,所以我认为只需将列表弹出一个模态即可.我生成我的div并在模态中选择对象,然后在“显示”之后,我调用Chosen：

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

在此之后,Chosen似乎被打破了.选择项目显示为灰色 – 我无法单击它们.

在myApp.init()中,我填充了选择项,它可以工作.

在模态的幕后,我可以看到Chosen容器似乎已初始化,但它没有将select选项传递给chzn-drop div.在图像中,chzn-results UL应该填充选项.这是模态版本：

从HTML版本开始,它应该是什么样子：

在HTML版本中,我的代码位于body标签的底部(类似地,选择选项填充在myApp.init()中),它似乎工作得很好.通话顺序似乎相同……

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

这不仅仅是z-index的问题 – 我已经玩过没有运气了.似乎在模态中,Chosen插件以某种方式变得混乱而不是绑定或更新,即使它已经正确初始化.我不确定如何对其进行故障排除,也找不到其他有相同问题的人…这让我觉得这可能是一个时间问题(但为什么它在HTML中有用？),或者我做的事情很愚蠢(高度可能).有没有人有任何关于在哪里看或有什么问题的建议？

谢谢！

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

为选择输入添加HTML(根据Christopher的问题)

对于这两个版本,我使用以下代码填充select(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>

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

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