Question

我正在使用所选的jQuery插件（由Harvest）。它在（document）.ready上运行正常，但我有一个按钮，当单击它时，使用ajax动态创建更多选择对象，我想使用“选择”功能。但是，只有原始选择元素具有“选定”功能，而新（动态创建）功能不起作用。我正在使用jQuery.get来追加新元素。以下是代码示例：

jQuery(".select").chosen();//this one loads correctly
jQuery("#add-stage").click(function() {
    jQuery.get('/myurl',{},function(response) {
            //response contains html with 2 more select elements with 'select' class
            jQuery('#stages').append(response);
        jQuery(".select").chosen();//this one doesn't seem to do anything :-(
    });
});

我在想某个地方需要一个.live（）函数，但我还没弄清楚。非常感谢任何帮助！

注意 - 我没有尝试动态加载新选项，正如文档中使用 trigger("liszt:updated");

所指定的那样

Answer 1

确保response元素具有select类。

console.log( response );  // to verify

仅将插件应用于新元素也是一个好主意。

jQuery(".select").chosen();

jQuery("#add-stage").click(function() {
    jQuery.get('/myurl',{},function(response) {
        console.log( response ); // verify the response

        var $response = $(response);  // create the elements

        $response.filter('.select').chosen(); // apply to top level elems
        $response.find('.select').chosen();   // apply to nested elems
        $response.appendTo('#stages');
    });
});

此外，如果/myurl返回整个HTML文档，您可能会收到不可预测的结果。

Answer 2

编码后的

（填写选择）.write this

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

Answer 3

我和Chosen有类似的问题。我试图在用户点击链接后动态添加新的选择。我克隆了之前的选择，然后添加了克隆，但选择的选项不起作用。解决方案是剥离Chosen类并添加元素，将克隆放入DOM中，然后再次选择运行：

clonedSelect.find('select').removeClass('chzndone').css({'display':'block'}).removeAttr('id').next('div').remove();
mySelect.after(clonedSelect);
clonedSelect.find('select').chosen();

Answer 4

您可以使用ajax选择的一种方式：

$.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',
    cache: false,
    data: search
}).done(function(data){
    $.each(data, function(){
    $('<option />', {value: this.value, text: this.text}).appendTo(selectObj);
    });
    chosenObj.trigger('liszt:updated');
});

其中selectObj是特定的选择对象

但是......

选择实施非常糟糕。它有几个视觉错误，例如：选择一些选项，然后开始搜索新选项，然后删除选中并继续输入 - 您将获得'选择一些选项'扩展，如'选择一些选项搜索值'。它不支持JQuery链接。如果您将尝试实施AJAX，您会注意到，当您松开所选择的焦点时，输入的文本将消失，现在当您再次单击时，它将显示一些值。您可以尝试删除这些值，但这将很难，因为您不能使用'blur'事件，因为它在选择某些值时也会触发。我建议不要选择使用，特别是使用AJAX。

Answer 5

1.-下载Livequery plugin并从您的页面调用它。

2.-释放海妖：$(".select").livequery(function() { $(this).chosen({}); });

Answer 6

这是选择每次单击Chosen时使用ajax动态加载数据库的新选项的示例。

$('.my_chonsen_active').chosen({
    search_contains:true
});
$('.my_chonsen_active').on('chosen:showing_dropdown', function(evt, params){
     id_tosend=$(this).attr("id").toString();
     $.get("ajax/correspondance/file.php",function(data){ 
     $('#'+id_tosend).empty();
     $('#'+id_tosend).append(data);
     $('#'+id_tosend).trigger("chosen:updated");
   });
});

加载动态“选择”选择元素

6 个答案: