0

我正在研究 Grails 框架。我有 2 个具有一对多关系的域类 Country 和 City。我的想法是，当页面加载时，gsp 将有两个选择框，一个填充国家，当任何国家/地区选择该国家的城市时，该国家的城市将填充在第二个选择框中。我在这里使用 grails ajax (jquery)。

import grails.converters.JSON

class CountryController {

    def index() { redirect action: 'getCountries' }

    def getCountries() {
            def countries = Country.list()
            render view:'list', model:[countries:countries]
    }

    def getCities() {
        def country = Country.get(params.id)
        render country?.city as JSON
    }
}

当 getCities 动作被触发时，我得到如下 JSON：

[
   {
      "class":"com.samples.City",
      "id":3,
      "country":{
         "class":"Country",
         "id":2
      },
      "description":"California",
      "name":"California"
   },
   {
      "class":"com.samples.City",
      "id":4,
      "country":{
         "class":"Country",
         "id":2
      },
      "description":"Dalls",
      "name":"Dalls"
   }
]

但是在使用 eval 函数评估 JSON 时，从我的 gsp 页面，它返回“未定义”。

<g:select name="countrySelect" from="${countries}" 
    optionKey="id" optionValue="name" 
    noSelection="[null:'Select Country']"
    onchange="${
           remoteFunction(action: 'getCities',
               update: message,
               params: '\'id=\' + this.value',
           onSuccess:'updateCity(data)')
          }"/>
    <br/>
    City :: <g:select name="city" id="city" from=""></g:select>

标签中的以下代码

<head>

    <g:javascript library="jquery"></g:javascript>
    <g:javascript>
        function updateCity(data) {
            alert('done');
            var cities = eval("(" + data.responseText + ")")    // evaluate JSON
            alert(cities)
            var rselect = document.getElementById('city')

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

            //build cities
            for(var i=0; i < cities.length; i++) {
                var opt = document.createElement('option');
                opt.text = cities[i].name
                opt.value = cities[i].id
                try{
                    rselect.add(opt,null) //For Non IE
                }catch(ex){
                    rselect.add(opt) //For IE
                }
            }

        }
    </g:javascript>
    <r:layoutResources />
</head>

谁能帮我找出问题出在哪里？

4

1 回答 1

1

我通过对 JSON 数据使用 JQuery 每种方法解决了这个问题。

<g:javascript>
        function updateCity(data) {

            var rselect = document.getElementById('city')
            $.each(data, function(index, element) {
                //alert(element.name);

                var opt = document.createElement('option');
                if(element.name !== undefined){
                    opt.text = element.name
                    opt.value = element.id

                    try{
                        rselect.add(opt,null) //For Non IE
                    }catch(ex){
                        rselect.add(opt) //For IE
                    }
                }               
             });

        }
    </g:javascript>
于 2013-08-14T06:40:19.697 回答