How do l hide an alert div when the option of a select is changed?

Question

On every page load i pre-select the current option. This is the item that was selected when the previous request was made to the server. The request that was made results in a message that is displayed on a div. Once the user selects another option on the select a function is called that loads details of the option. I also want to hide the div showing the result of the previous request at this time. The problem is that even on the page load the function to hide the alert div would be called. This is because on page load if there was a previous request i change the current option of the select. This triggers onchange event which is where i plan on placing the hideAlert() function. Below is the code that pre-selects the option if there was a previous request. The value to pre-selected is on the page as an hidden value.

if( $('#debtor_select_edit').length){
        if( $('#pres_debtor').length ){//checking whether pres_debtor exists
            var deb = $('#pres_debtor').val();
            if($('#debtor_select_edit option').filter(function(){ return $(this).val() == deb; }).length){
                // found the category. Set it as current
                $('#debtor_select_edit').val(deb).change();
                fetch_debtor_details();
            }
        }
        else{
            //select first debtor by default
            $('#debtor_select_edit option:first').attr('selected', 'selected');
            fetch_debtor_details();
        }
    }

The select itself looks like this:

<select id="debtor_select_edit" onchange="hideEditAlert();fetch_debtor_details()" class="form-control">
    @foreach($debtors as $debtor)
        <option value="{{$debtor->id}}">{{$debtor->fullName}}</option>
    @endforeach
 </select>

The hideEditAlert() function looks like this:

function hideEditAlert(){
    $('#edit_alert_area').hide();
}

Answer 1

jQuery offers all sorts of easy features to hide/show/change elements on the screen.

The following code snippet gives an example on how to handle your issue.

<script type="text/javascript">
$(document).ready(function ($) {
    // Hide alert by default
    $('.alert').hide();

    // Check if the select option changes
    $(document).on('change', '.selectbox', function () {
        var selectedValue = $(this).val();
        // -- Your function to load additonal data here
        if (selectedValue == 'show') {
            $('.alert').show();
        } else {
            $('.alert').hide();
        }
    })
});
</script>

<div class="alert">
    <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
    <strong>Alert here</strong> Alert body ...
</div>

<select class="selectbox">
    <option value="-1" selected="selected" disabled="disabled">Choose</option>
    <option value="show">Show alert box</option>
    <option value="hide">Hide alert box</option>
</select>

Answer 2

<script>
$('div.alert').delay(5000).slideUp(300);
</script>