Javascript 当select的选项更改时，如何隐藏警报div？

每次加载页面时，我都会预先选择当前选项。这是向服务器发出上一个请求时选择的项目。发出的请求将产生一条显示在div上的消息。一旦用户在选择菜单上选择了另一个选项，将调用选择函数以加载该选项的详细信息。我还想隐藏显示上次请求结果的div。问题是，即使在页面加载时，也会调用隐藏警报div的函数。这是因为在页面加载时，如果有以前的请求，我会更改select的当前选项。这将触发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本身如下所示：

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

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

---

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>

$（文档）.ready（函数（$）{
//默认情况下隐藏警报
$（'.alert'）.hide（）；
//检查选择选项是否更改
$（文档）.on（'change'，'selectbox'，函数（）{
var selectedValue=$（this.val（）；
//--在此处加载附加数据的函数
如果（selectedValue==“显示”）{
$（'.alert'）.show（）；
}否则{
$（'.alert'）.hide（）；
}
})
});
&时代；
此处提醒提醒正文。。。
选择
显示警报框
隐藏警报框

$（'div.alert'）。延迟（5000）。滑动（300）；

如果打开浏览器的控制台（通常用鼠标右键单击页面，选择“检查元素”，然后选择“控制台”），应该会有一些关于发生了什么的信息。你的代码看起来很好，一个没有任何额外逻辑的真正通用的代码片段并不能真正回答OP的问题。。

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