js
window.onDomReady = function dgDomReady(fn){
if(document.addEventListener) //W3C
document.addEventListener("DOMContentLoaded", fn, false);
else //IE
document.onreadystatechange = function(){dgReadyState(fn);}
}
function dgReadyState(fn){ //dom is ready for interaction (IE)
if(document.readyState == "interactive") fn();
}
/* Objeto */
dgCidadesEstados = function(cidade,estado,init) {
this.set(cidade,estado);
if (init) this.start();
}
dgCidadesEstados.prototype = {
estado: document.createElement('select'),
cidade: document.createElement('select'),
set: function(estado, cidade) {
this.estado=estado;
this.estado.dgCidadesEstados=this
this.cidade=cidade;
this.estado.onchange=function(){this.dgCidadesEstados.run()};
},
run: function () {
var sel = this.estado.options.selectedIndex;
var itens = this.cidades[sel];
var itens_total = itens.length;
var opts = this.cidade;
while (opts.childNodes.length)
opts.removeChild(opts.firstChild);
this.addOption(opts, '', 'Selecione uma cidade');
for (var i=0;i<itens_total;i++)
this.addOption(opts, itens[i], itens[i]);
},
start: function () {
var estado = this.estado
while (estado.childNodes.length)
estado.removeChild(estado.firstChild);
for (var i=0;i<this.estados.length;i++)
this.addOption(estado, this.estados[i][0], this.estados[i][1]);
},
addOption: function (elm, val, text) {
var opt = document.createElement('option');
opt.appendChild(document.createTextNode(text));
opt.value = val;
elm.appendChild(opt);
},
estados : [
['','Selecione um estado'],['GO','Goiás'],['SP','São Paulo'],
],
cidades : [[
], ['Goiânia',
], ['São Paulo',
],
]
};
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR...nsitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="cidades-estados-v0.2_2.js"></script>
<script>
window.onload = function() {
new dgCidadesEstados(document.getElementById('estado'), document.getElementById('cidade'), true);
}
</script>
</head>
<body>
<p>
<select id="estado" name="estado">
</select>
</p>
<p>
<select id="cidade" name="cidade">
</select>
</p>
</body>
</html>
alguém poderia me falar se existe alguma forma de estilzar esse combo box ele funciona normalmente quando escolho o estado ( q só tem dois como vocês virão )
aparece a cidade correspondente do estado, alguém poderia me dizer se existe algum modo de fazer as bordas desse combobox ficarem rendodas,
por favor alguém me da um help, eu estou a uma semana tentando descobrir como fazer e ainda não consegui.
muito obrigado;
Ronaldo
Edição feita por: Ronaldo Jr., 27/07/2009, 15:27.
