【问题标题】：Chosen dropdown list not working with Modal选择的下拉列表不适用于模态
【发布时间】：2013-08-09 17:06:43
【问题描述】：

我正在尝试让 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 容器似乎已经初始化，但它没有将选择选项传输到 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 的问题）

对于这两个版本，我使用以下代码（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>

【问题讨论】：

您可以发布您的 HTML 以供选择输入吗？
在你的元素上初始化所选插件之前尝试调用myApp.init()
@koala_dev 嗯，在模态中有效。是否有原因它在模态中以一种方式工作，而在 HTML 中以另一种方式工作？这仍然让我感到困惑。如果您将其作为一个发布，我将很乐意接受它作为答案！谢谢！

标签： twitter-bootstrap drop-down-menu jquery-chosen bootstrap-modal bootbox

【解决方案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");

【讨论】：

【解决方案2】：

我在第一页上选择时遇到了类似的问题，然后我会打开一个模式，然后调用 $().chosen() 会导致 javascript 错误。

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

【讨论】：