Chosen.js在动态创建的下拉列表中

时间:2014-08-29 13:35:43

标签: jquery

这不是一个重复的问题。我看了其他的,他们要求一些不同的东西。

当我创建静态OPTIONS列表时。它工作得很好,我可以选择项目并从选择的多选框中删除项目。

然后我删除静态代码并将其替换为ajax调用以动态填充列表。这些项看起来与静态项相同,但列表不起作用。

我有一个使用ajax调用创建的列表。

以下是该动态列表的代码。

$.ajax({
    url: "./api/genericHandler.php?argument=optionsKeywords",
    type: 'POST',
    success: function(data) {
        var json = $.parseJSON(data);
        $.each(json, function() {
            var obj = json.shift();
            $( "#media_keywords" ).append( "<option value="+obj.uuid+">"+ obj.key_word + "</option>" );
        });
    }
});

我甚至尝试自己创建<li>项目(由插件创建)。它显示了这些项目,但从未使这些项目成为现实。选择。

    $('.chosen-container').click(function(){
        $.ajax({
            url: "./api/genericHandler.php?argument=optionsKeywords",
            type: 'POST',
            success: function(json) {
                var myIndex = 0;
                var data = $.parseJSON(json);
                $.each(data, function() {
                    var obj = data.shift();
                    myIndex +=1;
                    $( ".chosen-results" ).append( "<li class='active-result' data->option-array-index="+myIndex+" value=" +
                     obj.uuid + ">" + obj.key_word + "</li>");
                });
            }
        });
    });

有人可以帮忙吗?

更新

如果我手动创建<ul>列表,我会得到选项的下拉列表,但如果我选择了一个项目。我在控制台上收到Uncaught TypeError: Cannot set property 'selected' of undefined错误。

这是chosen插件尝试设置item.selected = true;的地方 在Chosen.prototype.result_select = function(evt) {函数中。

对不起,我知道这有点随意,但我真的不知道?

1 个答案:

答案 0 :(得分:1)

感谢Rob Schmuecker

这就是我的工作。

$( document ).ready(function() {
    $.ajax({
        url: "./api/genericHandler.php?argument=optionsKeywords",
        type: 'POST',
        success: function(data) {
            var json = $.parseJSON(data);
            $.each(json, function() {
                var obj = json.shift();
                $( "#media_keywords" ).append( "<option value="+obj.uuid+">"+ obj.key_word + "</option>" );
            });

        }
    });

    $('.chosen-container').click(function(){          //--------\
        $("#media_keywords").trigger("chosen:updated");          |--- THIS BIT
    });                                               //--------/
});