Как скрыть оповещение при изменении варианта выбора?

Question

При каждой загрузке страницы я предварительно выбираю текущую опцию. Это элемент, который был выбран, когда предыдущий запрос был отправлен на сервер. Выполненный запрос приводит к сообщению, которое отображается в div. Как только пользователь выбирает другой параметр для выбора, вызывается функция, которая загружает детали опции. Я также хочу скрыть div, показывающий результат предыдущего запроса в это время. Проблема в том, что даже при загрузке страницы вызывается функция скрыть div. Это связано с тем, что при загрузке страницы, если был предыдущий запрос, я изменяю текущую опцию выбора. Это вызывает событие onchange, в котором я планирую установить функцию hideAlert(). Ниже приведен код, который предварительно выбирает параметр, если был предыдущий запрос. Значение для предварительного выбора находится на странице как скрытое значение.

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(); 
     } 
    } 

выбрать себе выглядит следующим образом:

<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> 

hideEditAlert() функция выглядит следующим образом:

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

Answer 1

JQuery предлагает все виды простых функций, чтобы скрыть/показать/изменить элементов на экране.

В следующем фрагменте кода приводится пример того, как справиться с проблемой.

<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>