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

Question

我正在尝试使用jQuery Chosen选择/下拉列表在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");

Answer 2

我在第一页上有一个类似的问题，然后我会打开一个模态，然后调用$（）。selected（）会导致javascript错误。

原因是第一页包含了jquery.js，模态也是如此。从模态中删除jquery.js包后，问题就解决了。