How to set select option to default value without refreshing the page

I'm trying to set the values for select options to default value whenever I changed report options without submitting or refreshing the page.

But whenever I changed reports, the values for session and semester remains the same and will only change back to default value if I submit the report or refresh the page.

The HTML/Laravel

<div class="form-group">
    <label class="control-label col-md-offset-1 col-md-2">Report:</label>
        <div class="col-md-6">
            <select id="list-report" name="list_report" class="form-control" required>
                <option></option>
            </select>
        </div>
</div>
<div id="div-ses" class="form-group group-filter" style="display: none;">
    <label class="control-label col-md-offset-1 col-md-2">Session:</label>
        <div class="col-md-6">
            <select id="list-session" name="list_session" class="form-control" style="width: 100%;">
                <option value=""></option>
            @foreach($list_session as $session)
                <option value=""></option>
            @endforeach
            </select>
        </div>
</div>
        <div id="div-sem" class="form-group group-filter" style="display: none;">
    <label class="control-label col-md-offset-1 col-md-2">Semester:</label>
        <div class="col-md-6">
            <select id="list-semester" name="list_semester" class="form-control" style="width: 100%;">
                <option value=""></option>
            @foreach($list_semester as $semester)
                <option value=""></option>
            @endforeach
            </select>
        </div>
</div>

The JQuery

$(document).ready(function() {

var list_report = <?php echo $json_list_report; ?>;


$('#list-report').select2({
    data: list_report,
    allowClear: true,
    placeholder: 'Please Select Report Name'
});
$('#list-session').select2({
    placeholder: 'Please Select Session',
});
$('#list-semester').select2({
    placeholder: 'Please Select Semester',
});


$('#list-report').on('keyup change', function() {
    $('#list-session').prop('selectedIndex', 0);
    $('#list-semester').prop('selectedIndex', 0);
});


});

As you can see, the 'keyup change' is supposed to set the value of select back to default value but it does not seem to work. I suspect this is laravel's logic error but I don't know how to fix this. Any help?

I expect the value for session and semester dropdown would be "Please Select Session/Semester" but the actual output is the value itself e.g Session: 2018/2019, Semester: 2

from Newest questions tagged laravel-5 - Stack Overflow https://ift.tt/2FL0sNH
via IFTTT