Combos enlazados
Con frecuencia necesitamos crear un campo de tipo select2 cuyos valores esté condicionado por el valor que se ha seleccionado previamente en otro selector. Un ejemplo frecuente de uso es condicionar el campo municipio al valor del campo centro directivo según el departamento al que pertenece.
A continuación mostraremos paso a paso cómo realizarlo suponiendo un primer campo de "Departamento" y un segundo campo de "Centro directivo".
PASO 1. Añadimos al primer selector sus valores
resolve({
data: [
{id: "1", text: "Presidencia del Gobierno"},
{id: "2", text: "Consejería de Administraciones Públicas, Justicia y Seguridad"},
{id: "5", text: "Consejería de Agricultura, Ganadería y Pesca"},
{id: "8", text: "Consejería de Sanidad"},
{id: "12", text: "Empresas Públicas"},
{id: "13", text: "Servicio Canario de Empleo"},
{id: "14", text: "Servicio Canario de Salud"},
{id: "15", text: "Consejería de Turismo, Industria y Comercio"},
{id: "17", text: "Consejería de Obras Públicas, Transportes y Vivienda"},
{id: "18", text: "Consejería de Educación, Universidades, Cultura y Deportes"},
{id: "19", text: "Consejería de Hacienda, Presupuestos y Asuntos Europeos"},
{id: "20", text: "Consejería de Economía, Conocimiento y Empleo"},
{id: "22", text: "Consejería de Transición Ecológica, Lucha contra el Cambio Climático y Planificación Territorial"},
{id: "23", text: "Consejería de Derechos Sociales, Igualdad"}
]
});
CODE
PASO 2. En el evento onchange del primer selector indicamos que debe recargarse los valores del segundo selector.
$('#select2-centro-directivo').fetchData();
CODE
Selectores en tablas
Recuerda que si estás trabajando en tablas, tienes que definir el campo dentro de la misma. Por ejemplo:
var value = wf.obtenerValor("select2","tabla", indice);
wf.obtenerElementoHTML("select2-2", "tabla").fetchData({"parent": value});
PASO 3. En el segundo selector configuraremos un origen de datos externo en el que mediante javascript filtraremos los datos en función del valor previamente seleccionado.
var parsedData = [
{parent: "1", id: "106", text: "Secretaría General de la Presidencia del Gobierno"},
{parent: "1", id: "117", text: "Dirección General de Comunicación"},
{parent: "1", id: "119", text: "Dirección General del Gabinete del Presidente"},
{parent: "1", id: "123", text: "Presidencia del Gobierno"},
{parent: "1", id: "124", text: "Vicepresidencia del Gobierno"},
{parent: "1", id: "125", text: "Viceconsejería de la Presidencia"},
{parent: "1", id: "126", text: "Viceconsejería de Acción Exterior"},
{parent: "1", id: "128", text: "Viceconsejería de Comunicación y Relaciones con los Medios"},
{parent: "1", id: "128", text: "Dirección General de Coordinación y Apoyo a la Vicepresidencia"},
{parent: "1", id: "128", text: "Dirección General de Emigración"},
{parent: "1", id: "128", text: "Dirección General de Relaciones Exteriores"},
{parent: "1", id: "128", text: "Dirección General del Gabinete de la Vicepresidencia"},
{parent: "2", id: "202", text: "Viceconsejería de Justicia"},
{parent: "2", id: "204", text: "Dirección General de la Función Pública"},
{parent: "2", id: "207", text: "Dirección General de Relaciones con Admón. de Justicia"},
{parent: "2", id: "209", text: "Instituto Canario de Administración Pública"},
{parent: "2", id: "213", text: "Viceconsejería de Administraciones Públicas y Transparencia"},
{parent: "2", id: "214", text: "Consejería de Administraciones Públicas, Justicia y Seguridad"},
{parent: "2", id: "1106", text: "Dirección General de Telecomunicaciones y Nuevas Tecnologías."},
{parent: "2", id: "1226", text: "Dirección General de Transparencia y Participación Ciudadana"},
{parent: "2", id: "1227", text: "Dirección General de Modernización y Calidad de los Servicios"},
{parent: "2", id: "1228", text: "Viceconsejería de Relaciones con el Parlamento"},
{parent: "2", id: "1232", text: "Viceconsejería de los Servicios Jurídicos"},
{parent: "2", id: "1233", text: "Dirección General de Seguridad y Emergencias"},
{parent: "2", id: "1315", text: "SGT Consejería de Administraciones Públicas, Justicia y Seguridad"},
{parent: "5", id: "504", text: "SGT. Consejería de Agricultura, Ganadería y Pesca"},
{parent: "5", id: "506", text: "Dirección General de Ganadería"},
{parent: "5", id: "509", text: "Instituto Canario de Investigaciones Agrarias"},
{parent: "5", id: "510", text: "Consejería de Agricultura, Ganadería y Pesca"},
{parent: "5", id: "511", text: "Instituto Canario de Calidad Agroalimentaria (ICCA)"},
{parent: "5", id: "1224", text: "Viceconsejería del Sector Primario"},
{parent: "5", id: "1225", text: "Dirección General de Agricultura"},
{parent: "5", id: "1280", text: "Dirección General de Pesca"},
{parent: "8", id: "802", text: "SGT. Consejería de Sanidad"},
{parent: "8", id: "811", text: "Instituto Canario de Hemodonación y Hemoterapia"},
{parent: "8", id: "812", text: "Escuela de Servicios Sanitarios y Sociales de Canarias"},
{parent: "8", id: "813", text: "Consejería de Sanidad"},
{ parent: "12", id: "1202", text: "Viviendas Sociales e Infraestructuras de Canarias (VISOCAN)"},
{ parent: "12", id: "1203", text: "Gestión Urbanística de Las Palmas, S.A. (GESTUR Las Palmas)"},
{ parent: "12", id: "1204", text: "Gestión Urbanística de Santa Cruz de Tenerife, S.A. (GESTUR Tenerife)"},
{ parent: "12", id: "1206", text: "Gestión Recaudadora de Canarias, S.A. (GRECASA)"},
{ parent: "12", id: "1207", text: "Sociedad Canaria de Fomento Económico, S.A."},
{ parent: "12", id: "1211", text: "Gestión y Planeamiento Territorial y Mediambiental, S.A. (GESPLAN)"},
{ parent: "12", id: "1212", text: "Cartográfica de Canarias, S.A. (GRAFCAN)"},
{ parent: "12", id: "1213", text: "Sociedad Anónoma de Promoción del Turismo, Naturaleza y Ocio (SATURNO)"},
{ parent: "12", id: "1214", text: "Hoteles Escuela de Canarias, S.A. (HECANSA)"},
{ parent: "12", id: "1215", text: "Canarias Congress Bureau Maspalomas Gran Canaria, S.A."},
{ parent: "12", id: "1216", text: "Canarias Congreso Bureau Tenerife Sur, S.A."},
{ parent: "12", id: "1218", text: "Instituto Tecnológico de Canarias, S.A. (ITC)"},
{ parent: "12", id: "1219", text: "Sociedad para el Desarrollo Económico de Canarias,S.A. (SODECAN)"},
{ parent: "12", id: "1220", text: "Gestión de Servicios para la Salud y Seguridad en Canarias, S.A."},
{ parent: "12", id: "1221", text: "Televisión Pública de Canarias, S.A."},
{ parent: "12", id: "1222", text: "Canarias Cultura en Red, S.A."},
{ parent: "12", id: "1223", text: "Promotur Turismo Canarias, S.A."},
{ parent: "13", id: "100", text: "Servicio Canario de Empleo"},
{ parent: "14", id: "804", text: "Secretaría General del Servicio Canario de Salud"},
{ parent: "14", id: "806", text: "Dirección General de Programas Asistenciales"},
{ parent: "14", id: "807", text: "Dirección General de Recursos Económicos"},
{ parent: "14", id: "808", text: "Dirección General de Recursos Humanos"},
{ parent: "14", id: "809", text: "Dirección General de Salud Pública"},
{ parent: "14", id: "1305", text: "Servicio Canario de Salud"},
{ parent: "15", id: "1229", text: "Dirección General de Infraestructura Turística"},
{ parent: "15", id: "1230", text: "Dirección General de Ordenación y Promoción Turística"},
{ parent: "15", id: "1231", text: "Viceconsejería de Turismo"},
{ parent: "15", id: "1263", text: "Dirección General de Industria"},
{ parent: "15", id: "1264", text: "Dirección General de Comercio y Consumo"},
{ parent: "15", id: "1284", text: "Consejería de Turismo, Industria y Comercio"},
{ parent: "15", id: "1293", text: "Viceconsejería de Industria, Comercio y Consumo"},
{ parent: "15", id: "1316", text: "SGT Consejería de Turismo, Industria y Comercio"},
{ parent: "17", id: "1239", text: "Consejería de Obras Públicas, Transportes y Vivienda"},
{ parent: "17", id: "1241", text: "Puertos Canarios"},
{ parent: "17", id: "1242", text: "Viceconsejería de Infraestructuras y Transportes"},
{ parent: "17", id: "1243", text: "Dirección General de Infraestructura Viaria"},
{ parent: "17", id: "1244", text: "Dirección General de Transportes"},
{ parent: "17", id: "1275", text: "Instituto Canario de la Vivienda"},
{ parent: "17", id: "1311", text: "SGT Consejería de Obras Públicas, Transportes y Vivienda"},
{ parent: "18", id: "1245", text: "Consejería de Educación, Universidades, Cultura y Deportes"},
{ parent: "18", id: "1247", text: "Viceconsejería de Educación, Universidades y Deportes"},
{ parent: "18", id: "1248", text: "Agencia Canaria de Calidad Universitaria y Evaluación Educativa"},
{ parent: "18", id: "1249", text: "Dirección General de Centros, Infraestructura y Promoción Educativa"},
{ parent: "18", id: "1250", text: "Dirección General de Formación Profesional y Educación de Adultos"},
{ parent: "18", id: "1251", text: "Dirección General de Ordenacíon, Innovación y Calidad"},
{ parent: "18", id: "1252", text: "Dirección General de Personal"},
{ parent: "18", id: "1253", text: "Dirección General de Universidades"},
{ parent: "18", id: "1277", text: "Dirección General de Cultura"},
{ parent: "18", id: "1278", text: "Dirección General de Deportes"},
{ parent: "18", id: "1279", text: "Viceconsejería de Cultura y Patrimonio Cultural"},
{ parent: "18", id: "1298", text: "Dirección Territorial de Educación TF"},
{ parent: "18", id: "1299", text: "Dirección Territorial de Educación GC"},
{ parent: "18", id: "1306", text: "Dirección General de Patrimonio Cultural"},
{ parent: "18", id: "1312", text: "SGT Consejería de Educación, Universidades, Cultura y Deportes"},
{ parent: "19", id: "1254", text: "Consejería de Hacienda, Presupuestos y Asuntos Europeos"},
{ parent: "19", id: "1256", text: "Viceconsejería de Hacienda, Planificación y Asuntos Europeos"},
{ parent: "19", id: "1257", text: "Dirección General de Planificación y Presupuesto"},
{ parent: "19", id: "1258", text: "Dirección General del Tesoro y Política Financiera"},
{ parent: "19", id: "1259", text: "Dirección General de Patrimonio y Contratación"},
{ parent: "19", id: "1260", text: "Intervención General"},
{ parent: "19", id: "1268", text: "Dirección General de Asuntos Europeos"},
{ parent: "19", id: "1291", text: "Instituto Canario de Estadística (ISTAC)"},
{ parent: "19", id: "1292", text: "Agencia Tributaria Canaria"},
{ parent: "19", id: "1301", text: "Ente Público Radiotelevisión Canaria (RTVC)"},
{ parent: "19", id: "1313", text: "SGT Consejería de Hacienda, Presupuestos y Asuntos Europeos"},
{ parent: "20", id: "1261", text: "Consejería de Economía, Conocimiento y Empleo"},
{ parent: "20", id: "1265", text: "Dirección General de Asuntos Económicos con África"},
{ parent: "20", id: "1266", text: "Viceconsejería de Economía e Internacionalización"},
{ parent: "20", id: "1267", text: "Dirección General de Promoción Económica"},
{ parent: "20", id: "1269", text: "Dirección General de Trabajo"},
{ parent: "20", id: "1270", text: "Consejo Económico y Social"},
{ parent: "20", id: "1294", text: "Agencia Canaria de Investigación, Innovación y Sociedad de la Información"},
{ parent: "20", id: "1297", text: "Viceconsejería de Empleo"},
{ parent: "20", id: "1314", text: "SGT Consejería de Economía, Conocimiento y Empleo"},
{ parent: "22", id: "1234", text: "Viceconsejería de Planificación Territorial y Transición Ecológica"},
{ parent: "22", id: "1235", text: "Dirección General de Planificación Territorial, Transición Ecológica y Aguas"},
{ parent: "22", id: "1237", text: "Viceconsejería de Lucha Contra el Cambio Climático"},
{ parent: "22", id: "1238", text: "Dirección General de Lucha Contra el Cambio Climático y Medio Ambiente"},
{ parent: "22", id: "1310", text: "Agencia Canaria de Protección del Medio Natural"},
{ parent: "22", id: "1317", text: "SGT Consejería de Transición Ecológica, Lucha Contra el Cambio Climático y Planificación Territorial"},
{ parent: "23", id: "1009", text: "Instituto Canario de la Igualdad"},
{ parent: "23", id: "1273", text: "Dirección General de Derechos Sociales e Inmigración"},
{ parent: "23", id: "1274", text: "Dirección General de Protección a la Infancia y la Familia"},
{ parent: "23", id: "1282", text: "Dirección General de Juventud"},
{ parent: "23", id: "1295", text: "Viceconsejería de Derechos Sociales"},
{ parent: "23", id: "1296", text: "Dirección General de Dependencia y Discapacidad"},
{ parent: "23", id: "1318", text: "SGT Consejería de Derechos Sociales, Igualdad, Diversidad y Juventud"}
];
parsedData = _.filter(parsedData, ["parent", wf.obtenerValor("select2-departamento")]);
resolve({data : parsedData});
CODE
Selectores en tablas
En el caso de que nuestros selectores se encuentren dentro de una tabla, tendremos que sustituir las dos últimas líneas del código anterior, por las siguientes:
parsedData = _.filter(parsedData, ["parent", params.parent]);
resolve({data : parsedData});
PASO 4. En el evento "Mostrar sólo si" del segundo selector le añadimos que si el primer selector no tiene valor no se muestre.
var show = false;
if (wf.obtenerValor("select2-departamento")) {
show = true;
}
resolve(show);
CODE
Descarga ejemplo
Tienes disponible el código json del ejemplo para su descarga y que puedas probarlo y adaptarlo a tus necesidades.