Select2 input box does not refresh default value

Question

I have a Select2 jquery plugin attached to a SELECT element. That Select2 has the allowClear attribute.

When I select a value in the list, the corresponding input box is not set to reflect the selected value. The selected value is set by the JQGRID edit form.

This is how I am creating the select column:

        {name: "responsable", width: 200, editable: true, edittype: "select", formatter: 'select', editrules: {required: false}, editoptions: {style: 'width: 310px', value: '{{ usuarios }}', dataInit: function(el) {
                    $(el).select2(
                            {
                                placeholder: "-[Seleccione responsable]-",
                                width: 310,
                                allowClear: true
                            });
                }}, stype: 'select', searchoptions: {sopt: ['eq'], value: '{{ usuarios }}'}},

When I first open an edit dialog, the input box is set with the value from the grid, but when I select another element, the old value is shown in the input text, however, when I expand the select list, the right value appears selected.

How can I solve this?

Thanks Jaime

Nicolás Straub Nicolás Straub · Accepted Answer · 2015-03-01T15:02:57

Select2 binds to the underlying change event. If you change the value programmatically (via $.val, for example), this event doesn't get triggered, so you have to trigger it manually:

$(el).val('some new value').trigger('change')

that will cause select2 to pick up on the change and update properly.

More info can be found in Select2's examples page, under programmatic access.

Select2 input box does not refresh default value

1 Answers