Question

在每个页面加载时，我预先选择当前选项。这是在向服务器发出上一个请求时选择的项目。发出的请求会导致显示在div上的消息。一旦用户在select上选择了另一个选项，就会调用一个加载该选项详细信息的函数。我还想隐藏显示上次请求结果的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 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 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>

如果更改选项的选项，我如何隐藏警报div？

2 个答案: