Get radio button value of child element jQuery

Question

I'm trying to make an AJAX search call with Select2. The input data depends on the selected radio button which is displayed above the select field.

Whenever I click the selectbox, the selected value of the radio buttons above it should be read and change the choice variable. However, when I click the selectbox, it changes the choice variable only once. If I click again, it doesn't change anymore. Why does this happen and how can I fix it? Thanks!

<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">Partner </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">Leverancier </span>
    </label>
    <div class="form-group" >
        <label for="x">label<br></label>

        <select id="x" name="x" class="searchselect searchselectstyle partnersupplierselect">
        </select>

    </div>
</div>

Here's my JS

var choice = 'partner';

    $('.partnersupplierselect').on('click', function(){
        var group = $(this).parent().parent();
        choice = group.find('.partnersupplier:radio:checked').val();
        console.log(choice);

        group.find('.partnersupplierselect').select2({
            ajax: {
                dataType: "json",
                type: "POST",
                data: function (params) {
                    return {
                        term: params.term,
                        '_token': token,
                        'choice': choice
                    };

                  // the rest is just the Select2 initialization
                  // console.log only gives once the value when I click it, and then never again

Here's the selectbox after it's being clicked:

<div class="form-group">
    <label for="yearlypartnersuppliermaintainance">Kies partner / leverancier jaarlijks onderhoud<br></label>
    <select id="yearlypartnersuppliermaintainance" name="yearlypartnersuppliermaintainance" class="searchselect searchselectstyle partnersupplierselect select2-hidden-accessible" tabindex="-1" aria-hidden="true">
    </select><span class="select2 select2-container select2-container--default select2-container--below select2-container--open select2-container--focus" dir="ltr" style="width: 250px;"><span class="selection"><span class="select2-selection select2-selection--single" role="combobox" aria-haspopup="true" aria-expanded="true" tabindex="0" aria-labelledby="select2-yearlypartnersuppliermaintainance-container" aria-owns="select2-yearlypartnersuppliermaintainance-results"><span class="select2-selection__rendered" id="select2-yearlypartnersuppliermaintainance-container"></span><span class="select2-selection__arrow" role="presentation"><b role="presentation"></b></span></span></span><span class="dropdown-wrapper" aria-hidden="true"></span></span>
</div>

Answer 1

Try changing your js to:

var choice = 'partner';

$(document).on('click', '.partnersupplierselect', function(){
    var group = $(this).parent().parent();
    choice = group.find('.partnersupplier:radio:checked').val();
    console.log(choice);

    group.find('.partnersupplierselect').select2({
        ajax: {
            dataType: "json",
            type: "POST",
            data: function (params) {
                return {
                    term: params.term,
                    '_token': token,
                    'choice': choice
                };

When dynamically generated, the DOM changes are not event linked in jQuery, so you use $(document).on('event','element',function(){...}); to trigger the event on the element...