Select not working properly with jQuery Steps

Question

So I'm making a form with jQuery Steps but select isn't working properly. When I pick from the dropdown, nothing happens. The default option is still the one that is selected.

I'm using https://developer.snapappointments.com/bootstrap-select/ for the selection.

js code:

$('#wizard_vertical').steps({
    headerTag: 'h3',
    bodyTag: 'section',
    transitionEffect: 'slideLeft',
    stepsOrientation: 'vertical',
    onInit: function (event, currentIndex) {
        setButtonWavesEffect(event);
    },
    onStepChanged: function (event, currentIndex, priorIndex) {
        setButtonWavesEffect(event);
    }
});

Also, select works properly outside the form.

I really have no idea how to fix this so help will be greatly appreciated.

Answer 1

Load the selectpicker with javascript after jquery-steps has been initialized.

HTML

<div class="form-group">
    <label for="lst-currency">Currency</label>
    <select class="form-control" id="lst-currency" title="Currency (All)">
    </select>
</div>

Javascript

// initialize your steps wizard
initSteps();

// initialize selectpicker element with JS

let options = [];
options.push('<option value="MMK">MMK</option>');
options.push('<option value="USD">USD</option>');
$("#lst-currency").html(options).selectpicker('refresh');

Or just call the refresh method

HTML

<div class="form-group">
    <label for="lst-currency">Currency</label>
    <select class="form-control" id="lst-currency" title="Currency (All)">
     <option value="MMK">MMK</option>
     <option value="USD">USD</option>
    </select>
</div>

Javascript

// initialize your steps wizard first
initSteps();

// call 'refresh' method of bootstrap-selectpicker   
$("#lst-currency").selectpicker('refresh');