CODEWITHSUNDEEP
angularjsjquery-select2
aviad cohen
aviad cohen

Reputation: 667

select2 widget fails to update the selected value programatically

Working with angular, select2 widget. I am declaring it in HTML something like this:

<div>
    <select id = "dropdown"
       ...
       <option value = "1" id="1">1</option>
       <option value = "2" id="2" >2</option>
       <option value = "3" id="3"" >3</option>
    /select>
</div

and want to programatically change the selected item (called from another function).

When invoking the code:

 $("#dropdown").select2().select2('val', "3")

I can see that the value at the dropdown changes, but when actually accessing the model attribute of the drop down (to fetch the selected item), it is not set to what I tried to set it to.

When checking the onChange event of the dropdown, I can see the e.val is undefined.

See the next fiddle as an example (after click the link, I wasn't suppose to get "undefined" in the alert box): http://jsfiddle.net/kcArV/1/

Any ideas what I am doing wrong ?

Upvotes: 0

Views: 916

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

It should be

$('#attribute').select2().on('change', function(e) {
    alert($(this).val());    
});

e is the event object, not the select control, the method context this points to the select element, so you can call the .val() to get the selected value

Demo: Fiddle

Upvotes: 2

Related Questions