CODEWITHSUNDEEP
javascriptjquery
cbp
cbp

Reputation: 25628

Using Jquery, load select options on focus

I am trying to load options into a select element when the user focuses.

Here is the jquery code I'm using:

$('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));
        });
    }
});

Here is the fiddle: http://jsfiddle.net/agnnC/

The solution almost works... except in Firefox (and sometimes not in Chrome either, although the fiddle I put together does appear to work).

The problem in Firefox is that when the user clicks on the select element, the currently selected value is not remembered and is changed to one of the new values in the drop down.

Can anyone think of a workaround?

Upvotes: 0

Views: 2136

Answers (2)

jfriend00
jfriend00

Reputation: 707298

I think the issue is that the selected attribute is not really a property the way you are using it. Per the MDN doc:

selected

If present, this Boolean attribute indicates that the option is initially selected. If the element is the descendant of a element whose multiple attribute is not set, only one single of this element may have the selected attribute.

Note, it talks about "initially selected" only, not real time changes. It also refers to selected only as an attribute, not a property.

The W3C spec for the option element also talks only about pre-selecting an option, not about making live changes using the selected attribute.

Once the select and options are live, the .selectedIndex property on the <select> object controls which option is selected in real time for single selection select elements.

In support of this theory, if you change to setting the saved item with .selectedIndex as shown below, the problem goes away:

$('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);
            }        
        });
    }
});

Working demo: http://jsfiddle.net/jfriend00/4333d/

Upvotes: 1

Steely Wing
Steely Wing

Reputation: 17597

Firefox can't change the focus option when select is opening, but you can change before it open, change the event to mousedown it working Fiddle

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

Upvotes: 0

Related Questions