Cascading selects are a common requirement in web interfaces and there's a good example with Grails and the Prototype Javascript framework with a select field of Country's that determines the list of Cities will show up in a secondary select field. I'm using Grails 1.3.7 with jQuery Mobile to present a mobile interface. I have very little javascript experience and had a lot of problems getting this to work correctly.
I'm using Intellij Idea for as my Grails IDE and it works great. Before that, I used NetBeans but I've switched to Idea because it has much better support for Grails. However, I was not able to use Idea to troubleshoot the Javascript that is embedded in the Grails GSP files. For that, I used the Firefox Firebug plugin which has already been very useful to view the HTML output from jQuery Mobile. I found this good video on using Firebug to troubleshoot Javascript.
Since I don't have much Javascript experience, I prefer an approach that uses Grails as much as possible and I found the postings on this discussion by Konstantyn Smirnov to be very helpful but I was not able to get this to initialize my "Cities" field when the page is initially loaded. There is also a good discussion of this topic by Jorge Baroudi. In the end, I went back to the posting by bpavie on grails.org. However, bpavie's post is based on Prototype that has been the default Javascript framework used until Grails 2.0 switched to jQuery. An important difference in most of the Grails examples posted so far is the fact that Prototype returns the variable 'e' while jQuery returns 'data'. A post by Claes Svensson shows an example of remoteFunction with jQuery.
One of the main differences I ran into was writing this for jQuery Mobile while most of the posted examples use Prototype. This article on safely parsing JSON with Javascript was very helpful.