tengo tres selects para seleccionar paises, provincias de esos paises y ciudades de esas provincias.
He añadido tres métodos a la clase HTMLSelectElement para poder implementar la funcionalidad y así, cuando el usuario seleccione un país, se carguen en el segundo select sus provincias y de forma análoga con el tercer select y las ciudades:
Código PHP:
HTMLSelectElement.prototype.addObserver = function(observer){
this.observer = observer;
};
HTMLSelectElement.prototype.stateChanged = function() {
this.observer.update(this);
};
HTMLSelectElement.prototype.update = function(subject) {
//Este método es abstracto, es decir, lo redefiniré dependiendo
//del Select al que pertenezca para que modifique los contenidos
//del select que le observa (el
alert("Observer ("+this.id+") está mirando "+subject.id);
};
De tal forma, que con este código Javascript y suponiendo que tengo dos Selects con los IDs "paises" y "provincias", para que las provincias se actualicen como yo especifique (en su método update) sólo tengo que escribir este código -una vez modificada la clase HTMLSelectElement claro-: (He simplificado el código con las líneas menos relevantes y comentando su funcionamiento)
Código PHP:
var oPaises = document.getElementById("paises");
var oProvincias = document.getElementById("provincias");
oPaises.addObserver(oProvincias);
oPaises.onchange = function() {
//aunque esto tb podría llamarlo desde el atributo
// "onchange=" en la etiqueta <select>
this.stateChanged()
};
//reescribo el HTMLSelectElement.update(subject)
//de las provincias
oProvincias.update = function(subject) {
//aquí podría sacar el país seleccionado de la instancia "subject"
//y rellenar las provincias correspondiente en este objeto (en oProvincias)
};
¿A alguien le ha ocurrido lo mismo creando sus propios objetos en Javascript?
