Setting the value of a select does not work in Firefox 2 and Safari.

Reported by:	GothAlice	Owned by:	flesler
Priority:	major	Milestone:	1.3
Component:	core	Version:	1.2.5
Keywords:	select selectedIndex	Cc:
Blocked by:		Blocking:

Description

After building a dynamic select element with the following code, attempting to set the current element using .val(valueToSelect) (the last three lines of the function) works fine in IE and Firefox 3 RC1, but fails to set the currentIndex in Safari and Firefox 2.

#!javascript
onNestedSelectReceived = function(container, data) {
    if ( data.results.children.length == 0 ) return;
    
    var container = $(container).empty();
    
    container.append('<option value=""><!-- IE --></option>');
    
    if ( data.results.parent )
        container.append('<option value="' + data.results.parent.id + '" style="font-style: italic;">Go Back to ' + data.results.parent.name + '…</option>');
    
    if ( data.results.selection.id != 1 )
        container.append('<optgroup label="Current Selection"><option value="' + data.results.selection.id + '" selected="True">' + data.results.selection.name + '</option></optgroup>');
    
    if ( data.results.children.length ) {
        var subs = $('<optgroup label="' + data.results.term + '"></optgroup>');
        for ( var i in data.results.children ) {
            subs.append('<option value=' + data.results.children[i].id + '>' + data.results.children[i].name + '</option>')
        }
        container.append(subs);
    }
    
    if ( data.results.selection.id != 1 ) {
        container.val(data.results.selection.id);
    } else container.val(''); // This is probably unnessicary.
};

Setting container.selectedIndex = 2;, however, works in all browsers and is functionally identical.

Attachments (0)

Change History (4)

Changed May 22, 2008 09:52PM UTC by GothAlice comment:1

Serves me right for not previewing before submitting. Argh. Why isn't javascript a valid preprocessor? >_<

#!js
onNestedSelectReceived = function(container, data) {
    if ( data.results.children.length == 0 ) return;
    
    var container = $(container).empty();
    
    container.append('<option value=""><!-- IE --></option>');
    
    if ( data.results.parent )
        container.append('<option value="' + data.results.parent.id + '" style="font-style: italic;">Go Back to ' + data.results.parent.name + '…</option>');
    
    if ( data.results.selection.id != 1 )
        container.append('<optgroup label="Current Selection"><option value="' + data.results.selection.id + '" selected="True">' + data.results.selection.name + '</option></optgroup>');
    
    if ( data.results.children.length ) {
        var subs = $('<optgroup label="' + data.results.term + '"></optgroup>');
        for ( var i in data.results.children ) {
            subs.append('<option value=' + data.results.children[i].id + '>' + data.results.children[i].name + '</option>')
        }
        container.append(subs);
    }
    
    if ( data.results.selection.id != 1 ) {
        container.val(data.results.selection.id);
    } else container.val(''); // This is probably unnessicary.
};

Changed May 23, 2008 12:13AM UTC by GothAlice comment:2

Note that this appears to have become an issue after upgrading to 1.2.4a (Rev: 5503).

Changed May 23, 2008 12:30AM UTC by flesler comment:3

owner:	→ flesler
status:	new → assigned

You're expecting .val() to set the selectedIndex ?

That's not what it does, it sets the value attribute.

Try converting that number into a string, and if it matches the value of an option, it should get selected.

container.val(data.results.selection.id+'');

Let me know if this fixes it please.

Changed May 23, 2008 04:11PM UTC by flesler comment:4

resolution:	→ invalid
status:	assigned → closed

Ok, reopen if it didn't work.

Side navigation