1. Page Template - ID "estado"
   
2. Script Python - ID "estado_py".
   
• Vai receber o parâmetro "estado"
3. Zsql Method - ID "zsql_select_cidade".

•  Vai receber o parâmetro "estado"

Crie em seu banco de dados uma tabela chamada "cidades", com os campos "cidade_id", "cidade_nome" e "cidade_estado". Insira alguns cadastros, tipo.
cidade_nome = "minha cidade"
estado_cidade = "AC"

Vamos começar criando nosso ZSQL Method. Lembre-se, ele irá receber o parâmetro "estado".

SELECT cidade_id as "codigo", cidade_nome as "cidade" FROM cidades
WHERE
cidade_estado = <dtml-sqlvar estado type="string">
ORDER BY cidade_nome

Agora vamos criar nosso script python. Lembre-se, ele irá receber o parâmetro "estado"

consulta = context.zsql_select_cidade(estado=estado).dictionaries()
return consulta

E por fim nosso page template. Importe o seu "prototype.js".
<script language="Javascript" type="text/javascript" tal:attributes="src string:${context/prototype.js/absolute_url}"></script>

Crie um <select> com as <options> dos estados da federação.
Exemplo:
<form name="myForm">
<label for="estados_uf">Estado</label>
  <select name="estados_uf" id="estados_uf" onchange="javascript:ConsultaCidades();">
     <options value="AC">AC</options>
  </select>
</form>

Crie o <select> onde serão preenchidas as cidades.
<label for="cidades">Cidades</label>
  <select name="cidades" id="cidades">
  </select>

Agora, vamos criar uma function javascript chamada ConsultaCidades.

<script language="Javascript">
function ConsultaCidades(){
  _select = document.myForm.estados_uf.selectedIndex; //pegando o objeto    selecionado do <select>
  _option = _select.myForm.estados_uf.options[_select].value; //pegando a   opcao selecionada
  url = 'estado_py';
  pars = 'estado='+ _option;
  myAjax = new Ajax.Request(url,{
                                          method:'post',
                                          parameters:pars,
                                          onComplete:mostraCombo
                                          });
}

function mostraCombo(resposta){
  retorno = resposta.responseText;  //retorno do script python
  _select = $('cidades'); // id do <select> que ira ser preenchido.
  _select.options.length = 0; //zerando o <select>
  if retorno.indexOf('cidade'){ // verificando se existe a palavra 'cidade' no responseText.
     result = eval(retorno);
     for (x=0;x<result.length;x++){
        _select.options[x] = new Option(result[x].cidade, result[x].codigo); // aqui onde o "for" ira preencher o select com o value e o text.
     }     
  }
}
</script>

Aqui você ja estará recebendo os valores no <select>

Vamos deixar esse exemplo com mais estilo. Para o <select> que irá exibir os resultados crie uma div com style display:none.

Exemplo:
<div id="divcidades" style="display:none">
   <label for="cidades">Cidades</label>
      <select name="cidades" id="cidades">
       </select>
</div>

Agora nossa function mostraCombo.

function mostraCombo(resposta){
  retorno = resposta.responseText; 
  _select = $('cidades');
  _select.options.length = 0;
  if retorno.indexOf('cidade'){
     result = eval(retorno);
     for (x=0;x<result.length;x++){
        _select.options[x] = new Option(result[x].cidade, result[x].codigo);
     }
     $('divcidades').style.display = 'block';
  }else{
     $('divcidades').style.display = 'none';
     alert ("Nenhuma cidade encontrada");
}

Com isso faremos o <select> da cidade, ser exibido apenas quando houver cidades, emitindo um alert de "Nenhuma cidade encontrada", quando não existir cidades para o estado selecionado.

Em um outro post, nós vamos criar uma div flutuante e um loading para cadastrar as cidades que não forem encontradas para aquele estado.

Até mais.