Question

我使用Grails site example代码实现了ajax select，用户选择了一个国家/地区并更新了城市字段。我使用的是jQuery而不是Prototype。

选择新国家/地区后，城市字段不会更改，但当用户点击城市选择时，它只显示新城市，用户可以选择其中一个。

正在更新城市选择列表，但当前显示的值不会自动更新。

这是观点：

        <div data-role="fieldcontain">
            <label for="country">Country</label>
            <g:select
                    optionKey="id" optionValue="name" name="country" id="country"
                    from="${com.TourneyCard.Country.list(sort:'name')}" value="${homeCountry.id}"
                    onchange="${remoteFunction(
                        action:'ajaxGetCityJSON',
                        params:'\'id=\' + escape(this.value)',
                        onSuccess:'updateCity(data);')}">
            </g:select>
        </div>

        <div data-role="fieldcontain">
            <label class="ui-select" for="city">City</label>
            <g:select name="city" id="tee" data-native-menu="true"
                      optionKey="id" optionValue="name" from="${homeCities}">
            </g:select>
        </div>

这是javascript：

<g:javascript>
    function updateCity(data) {
        if (data) {
            var rselect = document.getElementById('city')

            var l = rselect.length

            while (l > 0) {
                l--
                rselect.remove(l)
            }

            for (var i = 0; i < data.length; i++) {
                var tee = data[i]
                var opt = document.createElement('option');
                opt.text = city.name
                opt.value = city.id
                try {
                    rselect.add(opt, null) // standards compliant; doesn't work in IE
                }
                catch(ex) {
                    rselect.add(opt) // IE only
                }
            }
        }
    }
    window.onload = function() {
        var zselect = document.getElementById('city')
        var zopt = zselect.options[zselect.selectedIndex]
        ${remoteFunction(
          action: "ajaxGetCityJSON",
          params: "'id=' + zopt.value",
          onSuccess: "updateCity(data)")}
        }
</g:javascript>

Answer 1

在将新选项添加到城市选择列表后添加以下行。

rselect.selectedIndex = 0

此应重置列表中的所选选项，并强制浏览器重新显示列表而无需用户干预。

Ajax驱动的Grails选择不是令人耳目一新的选择

1 个答案: