Can't programmatically select option using Select2

Question

I have a Select2 working fine attached to a select list but when someone enters a new item and I rebind the select list and try to programmatically select the new item, it refuses to display.
There are a number of other posts re this but their solutions don't work for me.

Use .select2("val", value). Does nothing.
Use .select2("data", value). Does nothing. Not sure how this is supposed to be different.
Use the InitSelection option to set a value. This leads to the following error message: Uncaught Error: Option 'initSelection' is not allowed for Select2 when attached to a select element.

In the Ajax success function after adding the new option to the database, I have the following Javascript:

BindDishes(RestaurantID); //rebinds the select list successfully
$('#hidDishID').val = data.DishID; //populates a hidden field
var arr = '[{id: "' + data.DishID + '", text: "' + data.DishName + '"}]'; 
$("#dd").select2("data", arr);

So in this latest iteration I have tried to supply an array with the id and text from the select list item as per another suggested solution but still nothing occurs. What am I doing wrong? Is this impossible when using Select2 with a select list?

Edit: I have the following line in MVC that creates the Select list:

@Html.DropDownGroupListFor(m => m.DishID, Model.GroupedSelectList, "Select a dish", new { id="dd",style="width:470px;" })

which must be causing the problem by binding to DishID from the model which was originally blank when it came from the server. DropDownGroupListFor is just an HTML helper that allows for using OptionGroups in a Select but it must be the binding that is a problem. What is the best approach here, to bind in a different way or to somehow update the model's DishID, not sure of the best practice?

.select2("val", value) works for me. Could you provide a minimal complete reprodution? — recursive
– recursive, Commented Aug 4, 2014 at 23:19
Have added an edit to highlight what the problem must be - if .select("val", value) does the job then it must be being overridden by the binding described, just not sure the best general approach — user3775501
– user3775501, Commented Aug 5, 2014 at 10:13
$('#hidDishID').val = data.DishID; This looks wrong. Could you try chaning it to $('#hidDishID').val(data.DishID); please? — Dennis
– Dennis, Commented Aug 5, 2014 at 11:16
Thanks Chips, that does correctly populate the hidden field now, it's just not something that will impact the main issue as that field isn't yet used — user3775501
– user3775501, Commented Aug 5, 2014 at 12:00
Select2 takes place purely on the client. @Html.DropDownGroupListFor() takes place purely on the server. They don't do binding, at least not in the same context. They shouldn't be able to interact. It's purely one way communication. Select2 is only invoked after the server-side processing is completely done. — recursive
– recursive, Commented Aug 5, 2014 at 15:48

pmeyer · Accepted Answer · 2016-01-26 18:45:44Z

11

var $example = $(".js-example-programmatic").select2();
$example.val("CA").trigger("change");

edited Jan 26, 2016 at 18:45

answered Dec 9, 2015 at 18:56

pmeyer

9007 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:25:26Z

0

You need to destroy your select2 before adding/modifying items. If you do, then your select2 will respond just like its bound first time

Select2 Dropdown Dynamically Add, Remove and Refresh Items from

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered May 20, 2015 at 7:08

Sami

8,4599 gold badges72 silver badges104 bronze badges

Collectives™ on Stack Overflow

Can't programmatically select option using Select2

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related