0

GSP ページに 2 つの SELECT ボックスがあります。また、1 つの 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

あなたがこれについて行っている方法は非常に後ろ向きだと思いますが。問題の 1 つは、名前を渡していないのに cntr.name を使用している可能性があります。それは単なる文字列の配列です。cntr.name の代わりに cntr だけを試してみませんか?

    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」ではなく「data」です。evalも必要ありません。また、onComplete の代わりに onSuccess 関数を呼び出すように変更します。

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

また、これは怠け者です。

def list

代わりにこれを行います：

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