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

[GothAlice]

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.

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 + '&hellip;</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.

[GothAlice]

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

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 + '&hellip;</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.
};

[GothAlice]

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

[flesler]

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.

[flesler]

Ok, reopen if it didn't work.