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

我使用选择的jQuery插件（通过收获）。它在（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");

来源

2011-12-01 Brian Anderson

确保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文档，你可能会得到不可预知的结果。

来源

2011-12-01 23:42:43 RightSaidFred

谢谢，我在响应中发现了问题！选择的项目在那里，但他们有重复的ID，所以他们不会正确加载。过滤器之前的 –

添加： $（“。select”）。empty（）; 追加后添加： $（“。select”）。trigger（“chosen：updated”）; –

我和Chosen有类似的问题。我试图在用户点击链接后动态添加新的选择。我克隆了之前的选择，然后添加了克隆，但选择的选项不起作用。解决的办法是剥离已选择类和添加的元素，把克隆的DOM，然后再跑选择：你可以使用Ajax使用选择

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

来源

2012-06-11 12:52:56 Judson

一个办法：

$.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，您会注意到，当您松开选定的焦点时，输入的文本消失，现在当您再次单击时，它将显示一些值。您可以尝试删除这些值，但这将很困难，因为您无法使用“模糊”事件，因为它在选择某些值时也会触发。我建议不要使用选择，尤其是使用AJAX。

来源

2013-01-29 14:38:49 TomTom

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

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

来源

2013-07-17 14:25:51

你的代码后（填选）.WRITE这个

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

来源

2014-04-07 16:16:35

此选择的动态加载用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"); 
    }); 
});

来源

2016-09-11 07:35:57 Fawad

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

回答

相关问题