Entendiendo la terminología: SELECT DEPENDIENTE y Modelo MVC en Javascript
Empezaremos abordando los dos conceptos claves en nuestro tema de hoy: la característica SELECT DEPENDIENTE y el patrón de diseño de software Modelo Vista Controlador (MVC) aplicado en Javascript.
¿Qué es un SELECT DEPENDIENTE?
Un SELECT DEPENDIENTE se refiere a un sistema en el que las opciones disponibles en un menú desplegable dependen de las elecciones realizadas en uno o más menús desplegables anteriores. Este sistema, a menudo se ve en formularios en línea donde ciertas opciones sólo son aplicables bajo ciertas condiciones.
var selectPrimary = document.getElementById('selectPrimary');
var selectDependent = document.getElementById('selectDependent');
selectPrimary.onchange = function () {
selectDependent.value = '';
selectDependent.disabled = !this.value;
};
Modelo MVC aplicado en Javascript
El patrón de diseño de software Modelo-Vista-Controlador (MVC) se utiliza para desarrollar interfaces de usuario que dividen la lógica del programa que se ocupa de la interacción de la entrada de usuario, la manipulación de los datos, y la salida al usuario en tres componentes separados. Esto se hace con el objetivo de incrementar la flexibilidad y escalabilidad del código.
Implementación del SELECT DEPENDIENTE en el Modelo MVC
Ahora que entendemos estos dos conceptos, podemos ver cómo podríamos implementar un sistema de SELECT DEPENDIENTE utilizando el Modelo MVC en Javascript.
/* Modelo */
var model = {
selectedPrimary : '',
selectedDependent : ''
};
/* Vista */
var view = {
selectPrimary : document.getElementById('selectPrimary'),
selectDependent : document.getElementById('selectDependent'),
render : function () {
this.selectDependent.value = model.selectedDependent;
this.selectDependent.disabled = !model.selectedPrimary;
}
};
/* Controlador */
var controller = {
selectPrimaryChanged : function (value) {
model.selectedPrimary = value;
model.selectedDependent = '';
view.render();
}
};
view.selectPrimary.onchange = function () {
controller.selectPrimaryChanged(this.value);
};
view.render();
Funcionamiento del código
Vamos a desglosar lo que hace cada parte del código:
Modelo
El Modelo es el lugar donde vivirán y se actualizarán nuestros datos. En este caso, estamos almacenando las opciones seleccionadas para nuestros dos menús desplegables.
Vista
La Vista se encarga de representar la interfaz de usuario y reflejar cualquier cambio en el Modelo en esta interfaz. En nuestro caso, la vista se encarga de desactivar el select dependiente cuando no hay ninguna opción seleccionada en el select principal, y también de mantener actualizado el valor seleccionado en el select dependiente.
Controlador
El Controlador es el que actúa como intermediario entre el Modelo y la Vista, procesando cualquier entrada del usuario y actualizando el Modelo en consecuencia. Aquí, el controlador se encarga de actualizar el modelo cuando hay un cambio en el select principal.
Añadiendo funcionalidad adicional
El patrón MVC nos da una excelente base sobre la cual podemos añadir funcionalidad adicional a nuestro sistema de select dependiente. Podríamos, por ejemplo, agregar un sistema sofisticado de validación de formularios que desactive el botón de envío hasta que se hayan realizado elecciones válidas en todos los menús desplegables. O podríamos implementar características como acordeones, contendores de pestañas ocultables, entre otros, para hacer nuestro formulario más interactivo y fácil de usar.