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

我正在使用所选的jQuery插件（由Harvest）。 它在（document）.ready上运行正常，但我有一个按钮，当单击它时，使用ajax动态创建更多选择对象，我想使用“选择”function。 但是，只有原始选择元素具有“选定”function，而新（动态创建）function不起作用。 我正在使用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(){ $('', {value: this.value, text: this.text}).appendTo(selectObj); }); chosenObj.trigger('liszt:updated'); }); 

其中selectObj是特定的选择对象

但……

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

Answer 5

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

2.-释放Kraken： $(".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"); }); });