javascript - 没有域的 Grails 链选择

Question

我正在尝试链接两个，可能是三个 <g:select ...>使用 Ajax 的语句一起显示在这里 Populate dropdown list using ajax In grails但是我发现的所有示例都与我使用的示例有两个很大的不同。 1. 我使用的是 jQuery 库，而不是原型(prototype)。 2. 我的选择值没有域对象，它们是通过服务调用从 Oracle 表中提取的。

我的问题是这样的:

<g:select name="degreeSubject" from="${majors}" noSelection="${['':'-Choose Subject-']}" value="${degreeInstance?.degreeSubject }"/>
<g:select name="degreeConcentration" from="${concentrations}" noSelection="${['':'']}" value="${degreeInstance?.degreeConcentration }"/>

专业和浓度来自 Controller ，但填充在服务类中。

我在想 Controller 方法看起来像

def updateSelect = {
    def concentrations = degreeService.getConcentrations(params.selectedValue)
    render (template:"selectConcentration", model : ['concentrations' : concentrations])

}

但是，我无法让它工作。

想法？或者有人有一个使用 jQuery 执行此操作的示例，并且没有使用 Grails 2.2.4 的域对象？

Answer 1

您可以真正做到这一点，而无需特定于 javascript 库。如果您使用 grails 内置的 remoteFunction，它将为您处理 jQuery 部分。然后，您想要的学位主题选择是:

<g:select name="degreeSubject" 
          from="${majors}" 
          noSelection="${['':'-Choose Subject-']}" 
          value="${degreeInstance?.degreeSubject }"
          onChange="${remoteFunction(
            controller: 'yourControllerName', 
            action: 'updateSelect', 
            params: '\'value=\' + escape(this.value),
            onSuccess: 'updateConcentration(data)')}/>

关键是调用remoteFunction 的onChange 事件。远程函数将对您想要的任何 Controller 操作进行 ajax 调用，但您需要调用 javascript 函数来获取 Controller 操作的结果并填充另一个选择。如果你想用简单的 js 做到这一点，你可以这样做:

function updateConcentration(items) {
    var control = document.getElementById('degreeConcentration')

    // Clear all previous options
    var i = control.length
    while (i > 0) {
        i--
        control.remove(i)
    }

    // Rebuild the select
    for (i=0; i < items.length; i++) {
        var optItem = items[i]
        var opt = document.createElement('option');
        opt.text = optItem.value
        opt.value = optItem.id
        try {
                control.add(opt, null) // doesn't work in IE
        }
        catch(ex) {
                control.add(opt) // IE only
        }
    }
}

最后你的 Controller Action 应该是这样的:

def updateSelect(value) = {
    def concentrations = degreeService.getConcentrations(value)
    render concentrations as JSON // or use respond concentrations if you upgrade to 2.3
}