Cannot set select2 values
I'm using Select2 v4 and I have the object initialized:
posts.blade.php
<select class="form-control" name="categories" multiple="multiple" id="cat_select">
@foreach ($categories as $c)
<option value="{{$c->id}}">{{$c->title}}</option>
@endforeach
</select>
I already have it initiliased with default values that can be selected manually by the user. I have an ajax function that returns categories already initialised in the select. I want the returned data to be set in the select but it's not working. So for example the select already have option "sports", and from the ajax it returns "sports". I want "sports" to be selected.
javascript
let select_cat = $("select#cat_select").select2();
What I have tried
$("#cat_select").val([data.title]).trigger("change"); //which doesn't work for some reason
javascript jquery jquery-select2
asked Nov 16 '18 at 2:26
AdisAdis
413418
add a comment |
I'm using Select2 v4 and I have the object initialized:
posts.blade.php
<select class="form-control" name="categories" multiple="multiple" id="cat_select">
@foreach ($categories as $c)
<option value="{{$c->id}}">{{$c->title}}</option>
@endforeach
</select>
I already have it initiliased with default values that can be selected manually by the user. I have an ajax function that returns categories already initialised in the select. I want the returned data to be set in the select but it's not working. So for example the select already have option "sports", and from the ajax it returns "sports". I want "sports" to be selected.
javascript
let select_cat = $("select#cat_select").select2();
What I have tried
$("#cat_select").val([data.title]).trigger("change"); //which doesn't work for some reason
javascript jquery jquery-select2
asked Nov 16 '18 at 2:26
AdisAdis
413418
No. I'm following the documentation from select2.org/programmatic-control/methods but I'm guessing it does the same thing.
– Adis
Nov 16 '18 at 2:58
add a comment |
I'm using Select2 v4 and I have the object initialized:
posts.blade.php
<select class="form-control" name="categories" multiple="multiple" id="cat_select">
@foreach ($categories as $c)
<option value="{{$c->id}}">{{$c->title}}</option>
@endforeach
</select>
I already have it initiliased with default values that can be selected manually by the user. I have an ajax function that returns categories already initialised in the select. I want the returned data to be set in the select but it's not working. So for example the select already have option "sports", and from the ajax it returns "sports". I want "sports" to be selected.
javascript
let select_cat = $("select#cat_select").select2();
What I have tried
$("#cat_select").val([data.title]).trigger("change"); //which doesn't work for some reason
javascript jquery jquery-select2
asked Nov 16 '18 at 2:26
AdisAdis
413418
I'm using Select2 v4 and I have the object initialized:
posts.blade.php
<select class="form-control" name="categories" multiple="multiple" id="cat_select">
@foreach ($categories as $c)
<option value="{{$c->id}}">{{$c->title}}</option>
@endforeach
</select>
I already have it initiliased with default values that can be selected manually by the user. I have an ajax function that returns categories already initialised in the select. I want the returned data to be set in the select but it's not working. So for example the select already have option "sports", and from the ajax it returns "sports". I want "sports" to be selected.
javascript
let select_cat = $("select#cat_select").select2();
What I have tried
$("#cat_select").val([data.title]).trigger("change"); //which doesn't work for some reason
javascript jquery jquery-select2
javascript jquery jquery-select2
asked Nov 16 '18 at 2:26
AdisAdis
413418
asked Nov 16 '18 at 2:26
AdisAdis
413418
edited Nov 16 '18 at 2:53
Adis
asked Nov 16 '18 at 2:26
AdisAdis
413418
asked Nov 16 '18 at 2:26
AdisAdis
413418
asked Nov 16 '18 at 2:26
AdisAdis
413418
413418
No. I'm following the documentation from select2.org/programmatic-control/methods but I'm guessing it does the same thing.
– Adis
Nov 16 '18 at 2:58
add a comment |
No. I'm following the documentation from select2.org/programmatic-control/methods but I'm guessing it does the same thing.
– Adis
Nov 16 '18 at 2:58
No. I'm following the documentation from select2.org/programmatic-control/methods but I'm guessing it does the same thing.
– Adis
Nov 16 '18 at 2:58
No. I'm following the documentation from select2.org/programmatic-control/methods but I'm guessing it does the same thing.
– Adis
Nov 16 '18 at 2:58
add a comment |
2 Answers
2
active
oldest
votes
This was my solution. I had to destroy the select2, then added the values (array) to the select, and re-initialised it.
data.categories.map(function(el){
my_categories.push(el.id);
});
$("#cat_select").select2('destroy');
$("#cat_select").val(my_categories);
$("#cat_select").select2();
answered Nov 16 '18 at 3:34
AdisAdis
413418
add a comment |
First of all you need to return the selected values to the blade file from the controller.
Let the selected values be in $selected. Return it as
return view('posts', compact('selected'));
Then in your blade file you have to add the following script
$(document).ready(function() {
var selected = <?php echo json_encode($selected) ?>;
$('#cat_select').select2();
$('#cat_select').val(selected);
$('#cat_select').trigger('change');
});
This solution has been working for me and I have used it wherever I require select2 selected values.
answered Nov 16 '18 at 5:37
Bonish KoiralaBonish Koirala
4568
Sorry thats the exact same what I tried in my question description.
– Adis
Nov 16 '18 at 6:13
Can you show the code for your controller too?
– Bonish Koirala
Nov 16 '18 at 6:16
Sorry I have it done. Check my answer.
– Adis
Nov 16 '18 at 6:21
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330581%2fcannot-set-select2-values%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
This was my solution. I had to destroy the select2, then added the values (array) to the select, and re-initialised it.
data.categories.map(function(el){
my_categories.push(el.id);
});
$("#cat_select").select2('destroy');
$("#cat_select").val(my_categories);
$("#cat_select").select2();
answered Nov 16 '18 at 3:34
AdisAdis
413418
add a comment |
This was my solution. I had to destroy the select2, then added the values (array) to the select, and re-initialised it.
data.categories.map(function(el){
my_categories.push(el.id);
});
$("#cat_select").select2('destroy');
$("#cat_select").val(my_categories);
$("#cat_select").select2();
answered Nov 16 '18 at 3:34
AdisAdis
413418
add a comment |
This was my solution. I had to destroy the select2, then added the values (array) to the select, and re-initialised it.
data.categories.map(function(el){
my_categories.push(el.id);
});
$("#cat_select").select2('destroy');
$("#cat_select").val(my_categories);
$("#cat_select").select2();
answered Nov 16 '18 at 3:34
AdisAdis
413418
This was my solution. I had to destroy the select2, then added the values (array) to the select, and re-initialised it.
data.categories.map(function(el){
my_categories.push(el.id);
});
$("#cat_select").select2('destroy');
$("#cat_select").val(my_categories);
$("#cat_select").select2();
answered Nov 16 '18 at 3:34
AdisAdis
413418
answered Nov 16 '18 at 3:34
AdisAdis
413418
answered Nov 16 '18 at 3:34
AdisAdis
413418
answered Nov 16 '18 at 3:34
AdisAdis
413418
413418
add a comment |
add a comment |
First of all you need to return the selected values to the blade file from the controller.
Let the selected values be in $selected. Return it as
return view('posts', compact('selected'));
Then in your blade file you have to add the following script
$(document).ready(function() {
var selected = <?php echo json_encode($selected) ?>;
$('#cat_select').select2();
$('#cat_select').val(selected);
$('#cat_select').trigger('change');
});
This solution has been working for me and I have used it wherever I require select2 selected values.
answered Nov 16 '18 at 5:37
Bonish KoiralaBonish Koirala
4568
Sorry thats the exact same what I tried in my question description.
– Adis
Nov 16 '18 at 6:13
Can you show the code for your controller too?
– Bonish Koirala
Nov 16 '18 at 6:16
Sorry I have it done. Check my answer.
– Adis
Nov 16 '18 at 6:21
add a comment |
First of all you need to return the selected values to the blade file from the controller.
Let the selected values be in $selected. Return it as
return view('posts', compact('selected'));
Then in your blade file you have to add the following script
$(document).ready(function() {
var selected = <?php echo json_encode($selected) ?>;
$('#cat_select').select2();
$('#cat_select').val(selected);
$('#cat_select').trigger('change');
});
This solution has been working for me and I have used it wherever I require select2 selected values.
answered Nov 16 '18 at 5:37
Bonish KoiralaBonish Koirala
4568
Sorry thats the exact same what I tried in my question description.
– Adis
Nov 16 '18 at 6:13
Can you show the code for your controller too?
– Bonish Koirala
Nov 16 '18 at 6:16
Sorry I have it done. Check my answer.
– Adis
Nov 16 '18 at 6:21
add a comment |
First of all you need to return the selected values to the blade file from the controller.
Let the selected values be in $selected. Return it as
return view('posts', compact('selected'));
Then in your blade file you have to add the following script
$(document).ready(function() {
var selected = <?php echo json_encode($selected) ?>;
$('#cat_select').select2();
$('#cat_select').val(selected);
$('#cat_select').trigger('change');
});
This solution has been working for me and I have used it wherever I require select2 selected values.
answered Nov 16 '18 at 5:37
Bonish KoiralaBonish Koirala
4568
First of all you need to return the selected values to the blade file from the controller.
Let the selected values be in $selected. Return it as
return view('posts', compact('selected'));
Then in your blade file you have to add the following script
$(document).ready(function() {
var selected = <?php echo json_encode($selected) ?>;
$('#cat_select').select2();
$('#cat_select').val(selected);
$('#cat_select').trigger('change');
});
This solution has been working for me and I have used it wherever I require select2 selected values.
answered Nov 16 '18 at 5:37
Bonish KoiralaBonish Koirala
4568
answered Nov 16 '18 at 5:37
Bonish KoiralaBonish Koirala
4568
answered Nov 16 '18 at 5:37
Bonish KoiralaBonish Koirala
4568
answered Nov 16 '18 at 5:37
Bonish KoiralaBonish Koirala
4568
4568
Sorry thats the exact same what I tried in my question description.
– Adis
Nov 16 '18 at 6:13
Can you show the code for your controller too?
– Bonish Koirala
Nov 16 '18 at 6:16
Sorry I have it done. Check my answer.
– Adis
Nov 16 '18 at 6:21
add a comment |
Sorry thats the exact same what I tried in my question description.
– Adis
Nov 16 '18 at 6:13
Can you show the code for your controller too?
– Bonish Koirala
Nov 16 '18 at 6:16
Sorry I have it done. Check my answer.
– Adis
Nov 16 '18 at 6:21
Sorry thats the exact same what I tried in my question description.
– Adis
Nov 16 '18 at 6:13
Sorry thats the exact same what I tried in my question description.
– Adis
Nov 16 '18 at 6:13
Can you show the code for your controller too?
– Bonish Koirala
Nov 16 '18 at 6:16
Can you show the code for your controller too?
– Bonish Koirala
Nov 16 '18 at 6:16
Sorry I have it done. Check my answer.
– Adis
Nov 16 '18 at 6:21
Sorry I have it done. Check my answer.
– Adis
Nov 16 '18 at 6:21
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53330581%2fcannot-set-select2-values%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
No. I'm following the documentation from select2.org/programmatic-control/methods but I'm guessing it does the same thing.
– Adis
Nov 16 '18 at 2:58