Select value on initial load with AUI single select

Question

I'm trying to use the AUI single select component in an edit view; I'd like to select a value in the list on page load but can't figure out how to make it happen the right way.

I've tried setting the 'value' property via javascript as described in the documentation, e.g.

// Nothing is set by the following.  If I give the options a value and try to 
// set that, the same thing happens.
document.getElementById('login').value = 'Dropbox';
 
// Results in undefined
alert(document.getElementById('login').value);

It looks like I can set "selected='true'" on an option (not documented in the link above) which mostly works, but the associated image is not displayed in the selected value (see jsbin example.)

Is there some other way I should be going about this?  Thanks.

Sean Curtis · Accepted Answer

Adding the "selected" attribute to one of the <aui-option> elements is the right way to do this. Looks like there's a bug with it not rendering the icon though. I've raised https://ecosystem.atlassian.net/browse/AUI-3557 to track this.