0

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?

Community
  • 1
  • 1
aintnorest
  • 1,326
  • 2
  • 13
  • 20

1 Answers1

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);
  }
};
Perry
  • 528
  • 2
  • 12