AjaxはGrailsでリフレッシュしない選択を選択します

Question

Grails site exampleコードを使用してajax selectを実装しました。ユーザーが国を選択し、都市フィールドが更新されます。 PrototypeではなくjQueryを使用しています。

新しい国を選択すると、都市フィールドは変更されませんが、ユーザーが都市選択をクリックすると、新しい都市のみが表示され、ユーザーはその都市の1つを選択できます。

都市選択リストは更新されていますが、現在表示されている値は自動的に更新されません。

これは図である。ここでは

 <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

このはリスト内の選択オプションをリセットし、ユーザーの介入なしに再表示リストにブラウザを強制する必要があります。