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

Question

我正在使用jQuery插件chosen（由Harvest提供）。它在(document).ready上运行良好，但是当我单击一个按钮时，它会使用ajax动态创建更多的选择对象，我想使用“chosen”功能。然而，只有原始的选择元素具有“chosen”功能，新创建的（动态创建的）不起作用。我正在使用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");动态加载新选项。

- Brian Anderson

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文档，您可能会得到不可预测的结果。

- RightSaidFred

---

谢谢，我在响应中找到了问题！选择项都在那里，但它们有重复的ID，所以无法正确加载。 - Brian Anderson

在过滤器添加之前： $(".select").empty();在 appendTo 之后添加： $(".select").trigger("chosen:updated"); - Mario Gonzales Flores

Answer 2

在编写代码（填写选择）后，请编写以下内容：

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

- Rober Dote

Answer 3

我遇到了一个类似的问题，与 Chosen 相关。我想在用户单击链接后动态添加一个新的选择框。我克隆了之前的选择框，然后添加了克隆体，但是 Chosen 选项无法工作。解决方案是去掉 Chosen 类和已添加的元素，将克隆体放入 DOM 中，然后再次运行 chosen：

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

- Judson

Answer 4

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

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

- Dario Ferrer

Answer 5

你可以使用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是特定的选择对象

但是...

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

- TomTom

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");
   });
});

- Fawad