Famo.us how to create a Select Surface or something equivalent - famo.us

Question

I need a select box with options and an on select / on change so i can populate a second select box.
My first instinct was to just create one using a surface with a click event and a renderController / scrollview to make my drop down appear. This works wonderfully except that if I leave and come back to the page the zindex of the scrollview breaks and it scrolls over the container size.
Its a bug I need to deal with but my other problem is that with the small Iphone screen size conventional drop downs just eat to much screen real-estate.
This stackoverflow famo.us: how to handle textbox.onchange events had some great hints on how to edit an InputSurface. I thought using that and looking at the code for a Surface I could do it but no luck.
Any Ideas on how to deal with the lack of a select surface?

Answer 1

You can access the value property from inside the callback function:
function SelectSurface(options) {
Surface.apply(this, arguments);
this.onchange = options.onchange;
this._superDeploy = Surface.prototype.deploy;
SelectSurface.prototype.elementType = 'select';
}
SelectSurface.prototype = Object.create(Surface.prototype);
SelectSurface.prototype.constructor = SelectSurface;
SelectSurface.prototype.deploy = function deploy(target) {
target.onchange = this.onchange;
this._superDeploy(target);
};
var regionSelector = new SelectSurface({
size:[140,40],
onchange: regionSelect(),
content: '<option disabled selected style="display:none;">REGION</option><option value="central">CENTRAL</option><option value="northern">NORTHERN</option><option value="pacific">PACIFIC</option><option value="southern">SOUTHERN</option><option value="western">WESTERN</option>',
});
var regionSelect = function(){
return function() {
alert(this.value);
}
};