Take a look at the voted answer here: http://stackoverflow.com/questions/877328/jquery-disable-select-options-based-on-radio-selected-need-support-for-all-brow/878331#878331
They implement this functionality quite nicely.
Basically what you need here is a mapping between the "value" of the "#area" dropdown and the options presented in the school area.

You can add the filterOn plugin to lib/assets/javascripts/plugins folder.
Then you can use it like this:
```
$('select#school').filterOn('select#area', ->
   '1': <schools in beit shemesh>
   '2': <schools in bnei brak>
   '3': <schools in jerusalem>
   '4': <schools in lod>
   '5': <schools in tel aviv>
)
```

Of course the mapping between area id and schools needs to be dynamic so you can generate this mapping in a helper method (for example: area_to_school_mapping) and render it to the client.
Then you won't need the selectSchools and selectSchool methods.