How can I programatically change a jQuery select2 item?

Question

I have a dropdown on an asp.net-mvc page:

<% = Html.DropDownList("PersonId", Model.DevManagers, 
  new { @id = "PersonId", @class = "searchDropdown" })%>

and I am converting it to use jQuery select2 like this

$(".searchDropdown").select2({
  width: "500px",
  allowClear: true
});

the issue is that if I try then changing the underlying select value like this:

$('#PersonId').val(data.TechOwnerId);

the select2 widget doesn't change the selecteditem

What is the correct way to update the jQuery select2 selected item programmatically?

Answer 1

You need to do it like this -

$('#PersonId').select2("val",data.TechOwnerId);

Have a look at the API --> http://ivaynberg.github.io/select2/ ctrl+f .select2("val"