选择下拉列表不适用于Modal [英] Chosen dropdown list not working with Modal

问题描述

我正在尝试获取一个jQuery Chosen选择/下拉列表来工作在一个Bootbox模态。我在标准HTML页面上几乎有相同的确切代码，所以我认为直接将我的列表弹出一个模态是很直接的。我生成我的div并在模态中选择对象，然后在显示之后，我调用选择：

I am trying to get a jQuery Chosen select / dropdown list to work in a Bootbox modal. I have almost the same exact code working on a standard HTML page, so I thought it would be straight forward to just pop my list into a modal. I generate my divs and select objects in the modal, and then after it is "shown", I call Chosen:

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

此后，选择似乎被打破了。选择的项目是灰色的 - 我不能点击它们。

After this, Chosen seems to be broken. The select items are grayed out--I cannot click them.

在myApp.init（）中，我填充选择的项目，它的工作原理。

Inside myApp.init(), I populate the select items, and it works.

在模式的幕后，我可以看到选择的容器似乎已经初始化了，但是它不会将选择的选项转移到chzn-drop div。在图像中，应该使用chsn结果UL填充选项。这是模式版本：

Behind the scenes for the modal, I can see that the Chosen container seems to have initialized, but it doesn't transfer the select options to the chzn-drop div. In the image, the chzn-results UL should be filled with options. Here is the modal version:

这是HTML应该是什么样子的：

Here is what it should look like, from the HTML version:

在HTML版本中，我的代码位于body标签的底部（类似地，select选项填充在myApp.init（）中），似乎工作正常。呼叫顺序似乎是一样的...

In the HTML version, my code is at the bottom of the body tag (similarly the select options are populated in myApp.init()), and it seems to work just fine. The order of calls seems to be identical...

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

这不仅仅是z-index的问题 - 我已经玩过了，没有运气。看起来像模态里面，被选中的插件是不知何故变得困惑，没有绑定或更新，即使它已经正确初始化了。我不知道如何解决它，找不到有同样问题的其他人...这让我觉得这可能是一个时间问题（但为什么它工作在HTML？），或者我做某事笨可能）。有没有人有什么建议去看哪里或什么问题？

This is not just a matter of z-index--I have already played around with that with no luck. It seems like inside the modal, the Chosen plugin is somehow getting confused and not binding or updating, even though it has initialized properly. I'm not sure how to troubleshoot it and cannot find other people with the same problem...this makes me think it might be a timing issue (but why does it work in HTML?), or I am doing something stupid (highly likely). Does anyone have any suggestions on where to look or what is wrong?

谢谢！

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

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

对于这两个版本，我使用以下代码填充选择（编辑版本在myApp.init（）中）：

For both versions, I populate the select with the following code (edited version of what is in 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>');
    });
}

实际元素本身如下。在非工作模式版本中：

The actual elements themselves are as follows. In the non-working modal version:

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

在工作的HTML版本中：

And in the working HTML version:

<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>

推荐答案

我无法确定问题是什么没有看到您的实际代码结构，但通常我认为在初始化插件之前填充您的选择是一个好主意，所以最好的方法是在添加选项后，在您的ajax回调中的元素上添加插件初始化。 p>

I can't exactly tell what the problem is without seeing your actual code structure, but generally I think it's a good idea to populate you selects before initializing the plugin, so the best approach would be to add the plugin initialization on your elements in your ajax callback after the options have been added.

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

如果您需要添加选项到您的< select> 元素在插件初始化后，您需要触发选择：更新事件在字段上，例如：

If you need to add options to your <select> elements after the plugin is initialized, you'd need to trigger the chosen:updated event on the field, ex:

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

这篇关于选择下拉列表不适用于Modal的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！