0

我的 GSP 页面中有两个 SELECT 框。我想更改一个 SELECT 框的值取决于同一页面上的另一个 SELECT 框 Onchange 而无需刷新。

创建.gsp

    <%@ page contentType="text/html;charset=ISO-8859-1" %>
    <html>
    <g:javascript library="jQuery"/>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/>
    <meta name="layout" content="main"/>
    <title>Insert title here</title>
    </head>
    <body>
    <g:form action="" class="inputform">
     <div class="body">
     <div id="cntrls" style="height:550px;width: 600px;border: 1px solid #cccccc;float: left;position: relative;">
    <table>
      <tr>
        <td>Layout or Controls :</td>
        <td><g:select name="layout" id="layout" from="['Layout Component','Control']" noSelection="['0':'----Select----']" onchange="${remoteFunction(controller:'FormCreator', action:'populateControls', onComplete:'cntrl_type(e)',params:'\'filter=\' + escape(this.value)' )}"/></td>
                    </tr>
    <tr>  
      <td>Control Type :</td>  
      <td><g:select name="cntrl_type" id="cntrl_type" from="" noSelection="['0':'----Select----']" value="${formCreator.cntrl_type }"/></td>
      </tr>   
      </table>
    </div>
    </div>
    </g:form>
    </body>
    </html>
<g:javascript>
function cntrl_type(e) {    
    var cntrls = eval("(" + e.responseText + ")") 
    if (cntrls) { 
var rselect = document.getElementById("cntrl_type")
    while (l > 0) { l-- rselect.remove(l) 
}

    // Rebuild the select 
    for (var i=0; i < cntrls.length; i++) { 
        var cntr = cntrls[i] 
        var opt = document.createElement("option"); 
        opt.text = cntr.name
        opt.value = cntr.name
        try { 
            rselect.add(opt, null) 
} 
            catch(ex) { 
                rselect.add(opt) // IE only 
                }
             } 
         } 
     }

    // This is called when the page loads to initialize city 
    var zselect = document.getElementById("layout") 
    var zopt = zselect.options[zselect.selectedIndex] 
    ${remoteFunction(controller:"FormCreator", action:"populateControls", params:"'filter=' + zopt.value", onComplete:"cntrl_type(e)")}
</g:javascript>

用于检索列表的以下处理程序。

package autogeneration

import grails.converters.JSON

class FormCreatorController {
def populateControls={      
        def list
        if(params.filter=="Layout Component"){
            list=['Div']
        }else if(params.filter=="Control"){
        list=['Text Type','Combo Box','Text Area','Submit','Label']
    }       
        render list as JSON
}

当我更改第一个选择框的值时，populateControls 函数起作用。但是 javascript 不起作用。

4

1 回答 1

0

虽然我相信你这样做的方式是非常倒退的。您的问题之一可能是您正在使用 cntr.name，而您没有将名称向下传递。它只是一个字符串数组。试试 cntr 而不是 cntr.name？

    cntrl_type(e) {    
    var cntrls = eval("(" + e.responseText + ")")         
    for (var i=0; i < cntrls.length; i++) { 
    var cntr = cntrls[i] 
    opt.text = cntr.name

此外，如果您使用 JQuery，它的“数据”，而不是“e”。你也不需要评估。还要更改它，使其调用函数 onSuccess 而不是 onComplete。

cntrl_type(e) {    
var cntrls = eval("(" + e.responseText + ")")

另外，这是懒惰的。

def list

改为这样做：

List<String> list = []
于 2012-08-03T18:32:54.177 回答