选择不与Modal一起使用的下拉列表

Question

我试图让一个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>

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");