示例问题

人为的动态下拉菜单可以在下面描述：

用户想选择一个城市的运动队。 用户首先为下拉菜单选择一个值以选择城市。 第二个下拉列表与该城市的运动队一起过滤。 一个例子来澄清：

• 用户在第一个下拉列表中选择达拉斯作为城市。 第二个下拉列表现在显示值：小牛，牛仔和游骑兵。
• 用户在第一个下拉列表中选择匹兹堡作为城市。 现在，第二个下拉列表显示值Steelers，Pirates和Penguins。

Grails中的高级设计

在深入探讨细节之前，我们可以退后一步，描述如何在grails框架中完成动态下拉菜单。

• 在gsp页面上，使用城市列表创建选择下拉列表。
• 在更改城市下拉列表时，将ajax调用发送到带有所选城市参数的服务器。
• 服务器上的控制器将接收该参数，并根据所选城市寻找球队。
• 返回带有新选择团队下拉列表的模板，从而提供带有已过滤团队列表的模型。

我们将在下面继续介绍代码片段。 该代码使用Grails 2.0进行了演示。

域对象

此示例的域对象非常简单：带有名称的City对象和Team对象。

package dropdownclass City {String namestatic hasMany = [teams: Team]static constraints = {}
}package dropdownclass Team {String namestatic belongsTo = [city: City]static constraints = {}String toString() {name}
}

Gsp页面

一个gsp页面包含直接来自GORM调用的城市列表。 这通常由默认生成的grails gsp页面执行和演示。 注意remoteFunction的使用。 这是一个grails gsp实用程序，它对服务器进行ajax调用，并为要返回的dom部分提供“ update”。

对于团队下拉菜单，我们将从一个空的选择标签开始。 下面是一个片段。

<g:select name="city.id" from="${City.list()}" optionKey="id" optionValue="name"noSelection="['':'Choose City']"onchange="${remoteFunction (controller: 'city',action: 'findTeamsForCity',params: ''city.id=' + this.value',update: 'teamSelection')}" />....<td id="teamSelection" valign="top"><select><option>Choose Team</option></select></td>

用于过滤的控制器

控制器将有一个封闭区，该封闭区输入城市ID，然后使用它来提供与城市相关的团队。 该关闭是通过ajax调用的。 闭合呈现模板和模型。

def dynamicDropdown闭合仅用于导航。 按照惯例，它会渲染同名的gsp。

package dropdownclass CityController {static scaffold = City// just navigation to the gspdef dynamicDropdown = {}def findTeamsForCity = {def city = City.get(params.city.id)render(template: 'teamSelection', model:  [teams: city.teams])}
}

模板

该模板用于替换gsp中dom的一部分。 它接受提供的任何模型。

<!-- This template renders a drop down after a city is selected --><g:select name="team.id" from="${teams}" optionValue="name"optionKey="id"/>

结论

有多种方法可以完成动态下拉菜单。 可以使用本机jQuery，甚至可以使用本机JavaScript。 我选择利用grails的内置功能并减少对客户端编程的依赖。 事实证明，这是干净，快速且非常简单的！

参考： Assar Java Consulting博客中来自JCG合作伙伴 Nirav Assar的Grails Dynamic Dropdown 。