如何获得在悬停时不会改变的select标记的值？

Question

我正在使用jQuery的.val()函数读取<select>标记的值。 看来，至少在Firefox中， .val()返回用户当前悬停的选项的值。 您可以在此jsfiddle中看到此行为。

有没有办法使用jQuery或纯JavaScript来获取选择框中显示的值，即实际触发变更事件的最后一个值？

创见

function foo() {
    var value = $('#select').val();
    // do something that depends on value
}

问题是我只希望foo()使用当前选择的值。 “ 选择”是指单击的选项。 在小提琴中，您可以看到此值在将鼠标悬停在选项上时发生了变化。

另类

var value;

$('#select').change(function() {
    value = $('#select').val();
}

function foo() {
    // do something with value
}

可以，但是该信息似乎在DOM中存在，因为最后一次单击的值显示在选择框中。

因此，我的问题是，是否有可能从DOM中获得最后点击的选项？

Answer 1

您可以在change事件上执行此操作，而不是按时间间隔执行此操作

基于以下注释的更新代码

$('#bar').on('change', function(){
  var $t =$(this) , value=$t.val();
  $t.attr('data-answer', value);
});

setInterval(function(){
 $('#foo').text($('#bar').attr('data-answer'));
},1000);

您的选择将具有此属性

<select id="bar" data-answer="" >
 //options here
</select>

或使用.data方法：

$('#bar').on('change', function(){
  var $t =$(this) , value=$t.val();
  $t.data('answer', value);
});

setInterval(function(){
 $('#foo').text($('#bar').data('answer'));
},1000);

Answer 2

听起来您正在寻找focus（）

$("select").focus(function () {

    var focusValue = this.value;

    $('#foo').text(focusValue);

})

您可以将事件侦听器focus与change链接在一起，以找到当前值，然后找到所选值。

$("select").focus(function () {

    var focusValue = this.value;

    $('#foo').text(focusValue);

}).change(function() {

    var changeValue = this.value  

    $('#foo').text(changeValue);

});

这是一个jsFiddle演示