Question

我正在尝试在用户关注时将选项加载到 select 元素中。

这是我正在使用的jquery代码：

$('select').focus(function() {
    var $this = $(this);
    if (!$this.data('hasitems')) {
        var selectedValue = $this.val();

        $this.empty()
            .append($('<option></option')
            .attr('value','')
            .text('Loading...'));

        // This would usually be the result of an AJAX call
        $this.empty()
            .data('hasitems','true');

        $.each(['a','b','c','d'], function(index,item) {
            $this.append($('<option></option>')
                         .attr('value',item)
                         .text(item)
                         .prop('selected', selectedValue == item));
        });
    }
});

这是小提琴： http://jsfiddle.net/agnnC/

解决方案几乎有效......除了在Firefox中（有时也不在Chrome中，虽然我放在一起的小提琴看起来确实有用）。

Firefox中的问题是，当用户点击select元素时，不会记住当前选定的值，并将其更改为下拉列表中的一个新值。

有人能想到一个解决方法吗？

Answer 1

我认为问题在于selected属性并不是您使用它的方式。根据{{3}}：

选择

如果存在，则此布尔属性表示该选项为   最初选择。如果元素是后代   未设置多个属性的元素，只有一个元素    此元素可能具有所选属性。

注意，它只谈到“最初选择”，而不是实时更改。它还指仅选择作为属性，而不是属性。

MDN doc也只讨论预先选择一个选项，而不是使用所选属性进行实时更改。

一旦select和options生效，.selectedIndex对象上的<select>属性将控制实时选择哪个选项用于单个选择元素。

为支持这一理论，如果您更改为使用.selectedIndex设置保存的项目，如下所示，则问题就会消失：

$('select').focus(function() {
    var $this = $(this);
    if (!$this.data('hasitems')) {
        var selectedValue = $this.val();

        $this.empty()
            .append($('<option></option')
            .attr('value','')
            .text('Loading...'));

        // This would usually be the result of an AJAX call
        $this.empty()
            .data('hasitems','true');

        $.each(['a','b','c','d'], function(index,item) {
            $this.append($('<option></option>')
                         .val(item)
                         .text(item));
            if (selectedValue == item) {
                $this.prop("selectedIndex", index);
            }        
        });
    }
});

工作演示：W3C spec for the option element

Answer 2

Firefox在option打开时无法更改焦点select，但您可以在打开前更改，将事件更改为mousedown工作 {{3} }

$('select').mousedown(function() {
  // ...
});

使用Jquery，在焦点上加载选择选项

2 个答案: