Question

我有一个绑定到select标签的更改事件。 select标签中的第一个选项被禁用，因为我将其用作菜单的默认文本。如果用户单击选择标记，则将鼠标悬停在选项上而不选择它，然后在选择菜单外部单击两次以触发更改事件。如何防止此更改事件被触发。

HTML

<select id="select">
    <option disabled="disabled" selected="selected">Title</option>
    <optgroup label="things">
        <option>cars</option>
        <option>boats</option>
        <option>world</option>
    </optgroup>
</select>

jQuery

$('#hide').click(function(){
    $('#select').hide();
});
$('#show').click(function(){
    $('#select').show();
});
$('#select').change(function(){
    alert($(this).val());
});

代码只是我的问题的一个例子。我添加了按钮，因为在我的实际代码中，当用户点击它时，我隐藏了选择菜单。

以下是包含上述代码的fiddle。

修改

在查看评论之后，它看起来像是一个特定于Firefox的问题，因为它在Internet Explorer，Chorme和Safari中运行良好。

Answer 1

您始终可以将select上的某些数据与当前值相关联，并验证它是否已实际更改。

$('#hide').click(function(){
    $('#select').hide();
});
$('#show').click(function(){
    $('#select').show();
});
$('#select').data('currVal', 'Title');
$('#select').change(function(){
    if($(this).val() != $(this).data('currVal') {
        // this is actual value change
        alert($(this).val());
        $(this).data('currVal', $(this).val());
    }
});

我已用解决方案更新了原始小提琴：

http://jsfiddle.net/TPpD6/4/

更改未单击选项时在选择标记上触发的事件

1 个答案: