[英]How to refresh select option list after AJAX response
I use fastSelect plugin http://dbrekalo.github.io/fastselect/ I have input tag, when change value i do a call ajax to php server. 我使用fastSelect插件http://dbrekalo.github.io/fastselect/我有输入标签,当改变值我做一个调用ajax到php服务器。 My problem is that When I inspect the item and I look in the options, I see the data I just added, but in the browser it does not display, sorry for the quality of my English any help please ? 我的问题是当我检查项目并查看选项时,我看到我刚刚添加的数据,但是在浏览器中它没有显示,对不起我的英语质量有什么帮助吗?
Enclosed my code 附上我的代码
<select id="Recherche_log_commune" name="Recherche[log_commune][]" class="multipleSelectDepCom" multiple="multiple">
<optgroup label="Communes">
</optgroup>
</select>
<script> $('.multipleSelectDepCom').fastselect({maxItems: 10,noResultsText: 'Pas de résultat'}); </script>
<script>
$("#leftBlockDashboard .fstQueryInput").on("change paste keyup", function(event) {
event.preventDefault();
getCommuneAndDepartement($(this).val());
});
function getCommuneAndDepartement(expression) {
var dataString = {expression: expression};
$.ajax({
url: '{{path('get_commune_departement')}}',
type: "POST",
data: dataString,
success: function(data){
$("#Recherche_log_commune").find('optgroup[label="Communes"]').empty();
$.each(data, function(){
var option = '<option value="'+ this.com_id +'">'+ this.com_libelle +'</option>';
$("#Recherche_log_commune").find('optgroup[label="Communes"]').append(option);
});
$('.multipleSelectDepCom').fastselect({
maxItems: 10,
noResultsText: 'Pas de résultat',
});
}
})
}
</script>
You will need to reattach the control after the options are loaded: 加载选项后,您需要重新附加控件:
$('.selector').fastselect();
Even more complicated (to keep the selected value): 更复杂(保持选定的值):
$('.selector').fastselect({
onItemSelect: function($item, itemModel) {
//load your stuff
$('.selector').fastselect();
}
});
You Will need to refresh the select2 after ajax call like this. 你需要像这样在ajax调用之后刷新select2。
setTimeout(function(){
$('#select2_id').fastselect();
},500);
ok solved , very rude but works ... on ajax callback here is what i do: 好的解决了,非常粗鲁但工作......在ajax回调这里是我做的:
1) get a reference to original node ... in my case it is 1)获取对原始节点的引用...在我的情况下它是
var cc = $('#categories');
2) check if .fstElement exists 2)检查.fstElement是否存在
var fsexist = $(".fstElement").length > 0;
3) if exists remove it and reappend the original node 3)如果存在则删除它并重新连接原始节点
if (fsexist) {
$('.fstElement').remove();
$('#categories_div').append(cc);
}
4) reinit fastselect 4)重新启动快速选择
$('#categories').fastselect({maxItems: 10,
noResultsText: 'Choose categories'});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.