Question

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

Create.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不起作用。

Answer 1

虽然我相信你的方式是非常倒退的。您的一个问题可能是您正在使用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”。你也不需要eval。同时更改它，以便调用onSuccess而不是onComplete。

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

另外，这很懒惰。

def list

请改为：

List<String> list = []

当我尝试在Grails中使用Ajax填充<g：select>时，javascript函数不起作用？</g：select>

1 个答案: