In case anybody wants to know how to solve this
$("#e6").select2('data', {id: '1049', text: 'MyLabel'});
Question
Texbox is dynamically filled with a remote call using Select2 and how do I set preselected value. Here is the code
<input type="hidden" id="e6">
$("#e6").select2({
placeholder: "Search for a movie",
minimumInputLength: 1,
ajax: {
url: url,
dataType: 'jsonp',
data: function (term, page) {
return {
q: term, // search term
page_limit: 10, };
},
results: function (data, page) {
return {results: data};
}
}
});
I tried this to preselect value 1049
$('#e6').select2('val', '1049');
but this doesn't set the value on the textbox.
Any ideas?
La solution
In case anybody wants to know how to solve this
$("#e6").select2('data', {id: '1049', text: 'MyLabel'});
Autres conseils
The solution that worked for me (and that is decribed in the documentation) was:
$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
I got it to work with
$("#e6").val("input id of the select2 option here").trigger("change")
in 2019 this worked for me
// Create a DOM Option and pre-select by default~
var newOption = new Option(data.text, data.id, true, true);
// Append it to the select
$('#mySelect2').append(newOption).trigger('change');
for multiple selection...
var li = $("#e6");
li.select2({
placeholder: "Placeholder"
});
var unselected = li.find('option:not(:selected)');
var selected = [];
for (var i = 0; i < unselected.length; i++) {
selected[i] = { id: unselected[i].value, text: unselected[i].text };
}
li.select2('data', selected);
This worked for me
<script>
$(function() {
if (window.formPrefill) {
// setTimeout to force script to run when all the stack on doc.ready is complete.
setTimeout(() => $(".js-select2-companies").select2('data', window.formPrefill), 10);
}
})
</script>
According to documentation, you can do it like this for multiple preselection:
$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
https://select2.org/programmatic-control/add-select-clear-items
in my case, my selected values were saved with comma seperated in my database so i used this approach and it worked for me
var ele = document.getElementById('farmProduce');
let val =ele.getAttribute('value')
for(i=0; i < len; i++){
ele.innerHTML = ele.innerHTML + '<option value="' + farm_produce[i].name + '"' + (val.includes(farm_produce[i].name) ? 'selected="'+true+'"' : null)+'>' + farm_produce[i].name + '</option>';
}
so essentially, just setting the selected attribute to true and false for each option did the tricks for me
I know this is an old question, but I had troubles with it too.
Since the select2 is filled when user inputs some text via AJAX, it starts empty. So the answers of the type .val('')
don't apply
$('#e6').val('1'); // Select the option with a value of '1'
$('#e6').trigger('change'); // Notify any JS components that the value changed
Then you need to preload some data to the select2. The selected answer did not work for me
$("#e6").select2('data', {id: '1049', text: 'MyLabel'});
You can force it to be preloaded by the AJAX using the code in the documentation.
In my case I needed this select2 prefilled with preselected elements while maintaining the AJAX search, I used the following:
select2 = $('#e6');
var option = new Option('MyLabel', 1049, true, true); //The true vars are for preselecting
select2.append(option); //You can repeat this and the previous line for multiselect
select2.trigger('change'); //Call change event so the control updates
In fewer lines:
var option = new Option('MyLabel', 1049, true, true); //The true vars are for preselecting. 1049 is the id.
$('#e6').append(option).trigger('change'); //Append option and call change event
Hope this helps someone.