更改选择选项时如何隐藏警报div？

Question

在每次页面加载时，我都会预先选择当前选项。这是在上一次向服务器发出请求时选择的项目。发出的请求会导致显示在 div 上的消息。一旦用户在 select 上选择了另一个选项，就会调用一个函数来加载选项的详细信息。我还想在这个时候隐藏显示上一个请求结果的 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 提供了各种简单的功能来隐藏/显示/更改屏幕上的元素。

以下代码 sn-p 给出了如何处理您的问题的示例。

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