javascript - 如果未在 JQuery 中进行选择，则显示 Select If Expand then Closed 的错误消息

Question

我有一个select，一旦用户展开select并关闭它而不进行选择，我就会显示一条错误消息，但我不知道如何来做到这一点。

如果val与默认值匹配，我会验证on.change，如下所示

选择选项时使用 JQuery

$('#orderPosition').change(
        function () {
            if ($('#orderPosition').val() == 'orderPositionDefault') {
                $('#orderErrorMessage').show();
                $('#orderPosition').focus();
                $('#orderPosition').css("background-color", "lightcoral");
            } else {
                $('#orderErrorMessage').hide();                    
                $('#orderPosition').css("background-color", "transparent");
            }
        }
    );

我尝试过以下方法

$('#orderPosition').on('click', function () {    
        // var isDirty = !this.options[this.selectedIndex].defaultSelected;
        var changed = $(this).val() != $(this).data('orderPositionDefault');
        alert(changed ? 'changed' : 'not changed');

        if (changed) {
            $('#orderErrorMessage').show();
        } else {
            $('#orderErrorMessage').hide(); 
        }
    });

但是上述问题是，一旦我单击select，就会显示错误消息，我需要显示用户单击它的信息，并立即将其关闭，而不进行任何操作一个选择。

Answer 1

当焦点离开输入字段时，使用blur事件执行代码。

$('select').on('change', function() {
    //change things here 
}).on('blur', function() {
    //when select is no longer in focus here
});

Documentation: https://www.w3schools.com/tags/ev_onblur.asp