Grails 中的 Ajax 驱动选择不刷新选择

Question

我已经使用 Grails 站点示例 代码实现了 ajax 选择，其中用户选择一个国家/地区，城市字段就会更新。我使用 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

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