Select2无法更改值

Question

I am dynamically loading a Select2 input with Ajax. Everything works fine, however, when I try to select a different value, It won't change for some reason. Here's an example of my problem: https://gyazo.com/f9ad7c3ead5fcd1d62740cc44f8d9691

As you can see, the value doesn't change when I click on it. Why does this happen? Maybe it helps when I say that both the first value and the other value have an ID of 1 (its data from different tables in the database) but different texts... How can I make it work?

$('.partnersupplierselect').select2({
    ajax: {
        dataType: "json",
        type: "POST",
        data: function (params) {
            var group = $(this).parent().parent();
            var choice = group.find('.partnersupplier:radio:checked').val();
            return {
                term: params.term,
                '_token': token,
                'choice': choice
            };
        },
        url: '{{asset('logs/create/bmi/getpartnerssuppliers')}}',
        cache: true,
        processResults: function (data) {
            return {
                results: data
            };
        }
    },
    "language": {
        "noResults": function () {
            return "Geen partners / leveranciers gevonden.";
        }
    },
    escapeMarkup: function (markup) {
        return markup;
    }
});


$('.partnersupplier').on('change', function(){
    var group = $(this).parent().parent();
    group.find('.partnersupplierselect').select2('val', '');
    group.find('.partnersupplierselect').select2('data', null);
});

Here's the HTML, but that shouldn't be the problem. But in case someone wants to see it:

<div class="group">
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect" for="partner">
        {{Form::radio('partnersupplier', 'partner', true, array('class' => 'mdl-radio__button partnersupplier', 'id' => 'partner'))}}
        <span class="mdl-radio__label">Test1 </span>
    </label>
    <label class="mdl-radio mdl-js-radio mdl-js-ripple-effect margin-radio" for="supplier">
        {{Form::radio('partnersupplier', 'supplier', false, array('class' => 'mdl-radio__button partnersupplier', 'id' => 'supplier'))}}
        <span class="mdl-radio__label">Test2 </span>
    </label>
    <div class="form-group selectdiv" >
        <label for="yearlypartnersuppliermaintainance">Blablabla<br></label>
        <select id="yearlypartnersuppliermaintainance" name="yearlypartnersuppliermaintainance" class="searchselect searchselectstyle partnersupplierselect">
        </select>
    </div>
</div>

Answer 1

I figured it out!

I changed:

$('.partnersupplier').on('change', function(){
    var group = $(this).parent().parent();
    group.find('.partnersupplierselect').select2('val', '');
    group.find('.partnersupplierselect').select2('data', null);
});

to:

$('.partnersupplier').on('change', function(){
    var group = $(this).parent().parent();
    group.find('.partnersupplierselect').empty().trigger('change');
});

For some reason, this works and the first thing doesn't. Weird, but at least I got it working!