5

我正在尝试让 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>
4

2 回答 2

2

如果没有看到您的实际代码结构，我无法准确判断问题是什么，但通常我认为在初始化插件之前填充您的选择是个好主意，因此最好的方法是在您的元素中添加插件初始化添加选项后的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");
于 2013-08-09T18:15:10.070 回答
0

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

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

于 2015-04-17T15:11:09.677 回答