selectタグはformRemoteタグ内にある必要はありません。remoteFunction呼び出しを使用した通常のフォームタグでうまくいきます。
http://grails.org/AJAX-Driven+SELECTs+in+GSPから:
gspでタグを選択します。
<form>
<g:select
optionKey="id" optionValue="name" name="country.name" id="country.name" from="${Country.list()}"
onchange="${remoteFunction(
controller:'country',
action:'ajaxGetCities',
params:'\\'id=\\' + escape(this.value)',
onComplete:'updateCity(e)')}"
></g:select>
<g:select name="city" id="city"></g:select>
</form>
grailsコントローラーにデータを送信するgspのjavascript関数:
<g:javascript>
function updateCity(e) {
// The response comes back as a bunch-o-JSON
var cities = eval("(" + e.responseText + ")") // evaluate JSON
if (cities) {
var rselect = document.getElementById('city')
// Clear all previous options
var l = rselect.length
while (l > 0) {
l--
rselect.remove(l)
}
// Rebuild the select
for (var i=0; i < cities.length; i++) {
var city = cities[i]
var opt = document.createElement('option');
opt.text = city.name
opt.value = city.id
try {
rselect.add(opt, null) // standards compliant; doesn't work in IE
}
catch(ex) {
rselect.add(opt) // IE only
}
}
}
}
// This is called when the page loads to initialize city
var zselect = document.getElementById('country.name')
var zopt = zselect.options[zselect.selectedIndex]
${remoteFunction(controller:"country", action:"ajaxGetCities", params:"'id=' + zopt.value", onComplete:"updateCity(e)")}
</g:javascript>
grailsコントローラー:
import grails.converters.*
class CountryController {
def ajaxGetCities = {
def country = Country.get(params.id)
render country?.cities as JSON
}
}