Loop Dependent select2 dropdowns update value but do not trigger change() event

[ermouth]

Loop Dependent select2 dropdowns update value but do not trigger change() event

[ermouth]

Your bind functions never store received value into data.id. You should write in this way:

function(data, value) {
  if(value != null) data.id = value;
  return data.id;
}

[SijanC147]

Still getting the same result, values are updated, and the right value is highlighted in the selection box when I click on the selector, but the views of the selection boxes remain the same.

[ermouth]

I run code below at jquerymy.com, replacing Bezier curve demo. All works pretty fine (I hardcoded RATES somehow) in env of jQuery 2.x.

http://jquerymy.com/index2.html has jQuery 3.x, and code also works pretty fine.

The only difference I see is that I have jquery migrate.

({
    data : {id: 18},
    init: function($form) {     $form.html(this.HTML); },
    ui: {
        "#uk": {
            init: function ($component) {
                $component.html(this.RATES
                .reduce((prev, next) => prev + '<option value="' + next.id + '">' + next.uk + '</option>', ''));
                $component.select2({
                    placeholder: "UK"
                });
            },
            bind: function(data, value) {
                if(value != null) data.id = value;
                return data.id;
            },
            recalc: "#eu, #usa",
            recalcDepth: 1
        },
        "#eu": {
            init: function ($component) {
                $component.html(this.RATES
                .reduce((prev, next) => prev + '<option value="' + next.id + '">' + next.eu + '</option>', ''));
                $component.select2({
                    placeholder: "EU"
                });
            },
            bind: function(data, value) {
                if(value != null) data.id = value;
                return data.id;
            },
            recalc: "#usa, #uk",
            recalcDepth: 1
        },
        "#usa": {
            init: function ($component) {
                $component.html(this.RATES
                .reduce((prev, next) => prev + '<option value="' + next.id + '">' + next.usa + '</option>', ''));
                $component.select2({
                    placeholder: "USA"
                });
            },
            bind: function(data, value) {
                if(value != null) data.id = value;
                return data.id;
            },
            recalc: "#uk, #eu",
            recalcDepth: 1
        }
    },
    HTML:[
        `<div class="row">
            <div>
                <select id="uk"></select>
            </div>
            <div>
                <select id="eu"></select>
            </div>
            <div>
                <select id="usa"></select>
            </div>
         </div>`
        ],

    RATES: [
        {id:18,eu:11,usa:12,uk:13},
        {id:70,eu:71,usa:72,uk:73},
        {id:30,eu:31,usa:32,uk:33}
    ]
})

[ermouth]

Ah, please use latest Select2 of 3.x branch https://github.com/select2/select2/releases/tag/3.5.4.

Branch 4.x is still bit unstable, so I have not adapt $.my for it yet.

[SijanC147]

Yep, that did the trick! Unfortunately the latest version available through npm is v3.5.1, but seems to work great.

Apologies for not having posted the RATES variable before.

Cheers.