使用 Jquery 填充下拉列表的 Grails 远程函数

Question

我正在使用 jquery 作为我的 grails 应用程序的 ajax 库。我得到了一个从另一个下拉列表中填充的下拉列表，但没有出现任何值。

普惠制：

  <label for="countryddl" >Country:</label>
  <g:select name="countryddl" id="countryddl" from="${locations.country}"  
            keys ="${locations.country}"
            noSelection="['':'Select one...']"
           onChange="${remoteFunction( action:'updateProvince',
                                          params: '\'id=\'+escape(this.value)',
                                          update: [success: 'provinceddl'] )}"

  ></g:select> <br/><br />
    <label for="provinceddl" >Province:</label>
  <g:select name="provinceddl" id ="provinceddl" noSelection="['':'Select one...']" from=""></g:select>

控制器：

def updateProvince = {
        def country = params['id']
        def locations = Location.findAllByCountry(country)
        render locations.province as JSON

    }

Answer 1

普惠制：

  <label for="countryddl" >Country:</label>
  <g:select name="countryddl" id="countryddl" from="${locations.country}"  
       keys ="${locations.country}"
       noSelection="['':'Select one...']"
       onChange="${remoteFunction( action:'updateProvince',
                     params: '\'id=\'+escape(this.value)',
                     update: [success: 'provinceddl'] )}"

  ></g:select> 
  <br><br>
  <div id="provinceddl">
      <p>Provinces will be loaded here according to country selected</p>
  </div>

控制器：

def updateProvince = {
        def country = params['id']
        def locations = Location.findAllByCountry(country)
        render(template:'result', model:[provinces: locations.collect{it.province}]
    }

_result.gsp

<label for="provinceddl" >Province:</label>
    <g:select name="provinceddl" noSelection="['':'Select one...']" from="${provinces}">
</g:select>

Answer 2

更新select的javascript函数：

function updateSelect(e, selectId) {
// The response comes back as a bunch-o-JSON
var json = eval("(" + e.responseText + ")") 

if (json) {
    var rselect = document.getElementById(selectId);

    // Clear all previous options
    var l = rselect.length;

    var selectedKey = "undefined";
    while (l > 0) {
        l--
        var value = rselect.options[l].value;
        var attr = rselect.options[l].getAttribute("selected");
        if(attr != null && attr.trim().length > 0) {
            selectedKey = value
        }
        rselect.remove(l);
    }

    // Rebuild the select
    for ( var i = 0; i < json.length; i++) {
        var j = json[i];
        var opt = document.createElement('option');
        opt.text = j.name;
        opt.value = j.id;
        if(j.id == selectedKey) {
            opt.setAttribute('selected', 'selected');
        }
        try {
            rselect.add(opt, null) // standards compliant; doesn't work in
            // IE
        } catch (ex) {
            rselect.add(opt) // IE only
        }
    }
}

}

关于普惠制：

<tr>
                <td>Teacher:</td>
                <td><eb:select name="teacher" from="${ availableTeachers }"
                        optionKey="id" optionValue="fullName" id="teacher"

                        onchange="${remoteFunction(
                            controller:controllerName, 
                            action:'ajaxGetClassesForTeacher', 
                            params:'\'id=\' + escape(this.value)', 
                            onComplete:'updateClasses(arguments[0])')}"
                         /></td>
            </tr>
            <tr>
                <td>Class:</td>
                <td><eb:select name="schoolClass" from="${ availableClasses }"
                        optionKey="id" optionValue="name"
                        id="schoolClass"  /></td>
            </tr>

<r:script disposition="defer">

function updateClasses(e) {
    updateSelect(e, "schoolClass");
}

</r:script>

在控制器中：

def ajaxGetClassesForSchool(params) {
    School school = School.get(params.id)
    def classes = SchoolClass.findAll() {
        eq("school", school)
    }

    classes = classes.collect() {
        new NameIdGSP(id:it.id, name:it.name)
    }
    def json = classes as JSON
    return json
}

NameIdGSP 是一个简单的 groovy 类，仅包含 int id 和 String name 属性

Answer 3

问题是update: [success: 'provinceddl'] 是除了设置元素的 HTML 属性与呈现的内容。您可能想要的是创建一个包装 div 并更新该 div。然后使用该数据再次渲染整个<g:select />。如果这不能为您解答，我稍后会通过示例进行编辑。