Javascript: evento onchange não popula segunda combo

function updateSelectOptions(lookupUrl, parentSelectElementId, childSelectElementId) {
    var parentSelectRef = jQuery('#' + parentSelectElementId);
    var childSelectRef  = jQuery('#' + childSelectElementId);

    jQuery.getJSON(lookupUrl,
        {paisId: parentSelectRef.val()}, 
        function(data) {
            var html = '<option value="">Selecionar...</option>';
            var len = data.length;
            for (var i = 0; i< len; i++) {
                html += '<option value="' + data[i].id + '">' + data[i].descricao + '</option>';
            }

            childSelectRef.html(html);
        }
    );
}

<spring:bind path="paisId">
 <select id="paisId" onchange="updateSelectOptions('${lookupStatesUrl}', 'paisId', 'ufId')">
  <c:forEach items="${listaPaises}" var="pais">
   <option value="${pais.id}">${pais.descricao}</option>
  </c:forEach>
 </select>
</spring:bind>

<spring:bind path="ufId">
 <select id="ufId" onchange="updateSelectOptions('${lookupCitiesUrl}', 'ufId', 'cidadeId')">
  <c:forEach items="${listaUfs}" var="uf">
   <option value="${uf.id}">${uf.descricao}</option>
  </c:forEach>
 </select>
</spring:bind>

<spring:bind path="cidadeId">
 <select id="cidadeId">
  <c:forEach items="${listaCidades}" var="cidade">
   <option value="${cidade.id}">${cidade.descricao}</option>
  </c:forEach>
 </select>
</spring:bind>

for (var i = 0; i< len; i++) {
                html += '<option value="' + data[i].id + '">' + data[i].descricao + '</option>';
            }