Question

我使用jQuery的.val()函数来读取<select>标记的值。看来，至少在Firefox中，.val()会返回用户当前悬停的选项的值。您可以在this 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 Demo

如何获取在悬停时不会改变的选择标记的值？

原创想法

替代

2 个答案: