Dynamically repopulate Select2 inside ACF front end form

I have front end ACF form that holds a Select2 field. I need to repopulate that field with ajax response.
I tried changing the underlying select and input[type=”hidden”] values but when I call trigger(‘change’) on the hidden field it doesn’t seem to update the Select2 state.

This is the relevant part of the ajax handler code:

var $options = ""; 
var new_val = [];
$.each(resp.sa_ext_features, function(i,v){
    $options = $options + '<option value="'+v.term_id+'" selected="selected" data-i="'+i+'">'+v.name+'</option>';
    new_val.push(v.term_id.toString());
});
//$sel.html($options);
//$sel.val(new_val).trigger('change');
console.log($acf_row.find('[data-name="sq_solution_features"] input[type="hidden"]').val());
debugger;
$acf_row.find('[data-name="sq_solution_features"] input[type="hidden"]').val(new_val.join('||')).trigger('change');

console.log($acf_row.find('[data-name="sq_solution_features"] input[type="hidden"]').val());
console.log(new_val);

Related posts

Leave a Reply