Hola a todos,
Basandome en un ejempo de otro sitio, he podido crear 3 select dependientes … FUNIONAN SUPER… el tema es que cree con scaffold una pagina y NECESITO que el los id que tienen en este momento: areas , categorias y subCategorias, se llamen: user_region , user_ciudad y user_comuna para poder grabarlas en mi tabla de postgresql… EL PROBLEMA es que si cambio en el javascript donde diga por ejemplo areas por user_region , simplemente no funciona… no se javascript asi que no se que cambiar para que funcione el js pero con los nombres que necesito en el id … aca el codigo… gracias…
<div class="container-fluid bg-secondary">
<div class="container bg-secondary">
<h2>Sign up</h2>
<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<%= render "devise/shared/error_messages", resource: resource %>
<table>
<tr style="width:30%;" >
<td class="text-white" style="text-align:right;"><%= f.label :email %></td>
<td><%= f.email_field :email, autofocus: true, autocomplete: "email" %></td>
</tr>
<tr>
<td class="text-white" style="text-align:right;"><%= f.label :password %>
<% if @minimum_password_length %>
<em class="text-white">(<%= @minimum_password_length %> characters minimum)</em>
<% end %>
</td>
<td><%= f.password_field :password, autocomplete: "new-password" %></td>
</tr>
<tr>
<td class="text-white" style="text-align:right;"><%= f.label :password_confirmation %></td>
<td><%= f.password_field :password_confirmation, autocomplete: "new-password" %></td>
</tr>
<tr>
<td class="text-white" style="text-align:right;"><%= f.label :nombre %></td>
<td><%= f.text_field :nombre %></td>
</tr>
<tr>
<td class="text-white" style="text-align:right;"><%= f.label :apellido %></td>
<td><%= f.text_field :apellido %></td>
</tr>
<tr>
<tr>
<td class="text-white" style="text-align:right;">Region</td>
<td><select id="areas"> <option value="0">seleccione</option> </select></td>
</tr>
<tr>
<td class="text-white" style="text-align:right;"><label for="areas">Ciudad / Provincia</label></td>
<td><select id="categorias"><option value="0">selecccione</option></select></td>
</tr>
<tr>
<td class="text-white" style="text-align:right;"><label for="areas">Comuna</label></td>
<td><select id="subCategorias"><option value="0">selecccione</option></select></td>
</tr>
</table>
<br>
<div class="actions">
<%= f.submit "Sign up", :class=>"btn btn-warning btn-sm" %>
</div>
<% end %>
<br>
<%= render "devise/shared/links" %>
<br>
</div>
<script>
var areas = [
{id:1,name:"Tarapacá"},
{id:2,name:"Antofagasta"},
{id:3,name:"Atacama"},
{id:4,name:"Coquimbo"},
{id:5,name:"Valparaíso"},
{id:6,name:"Libertador General Bernardo O'Higgins"},
{id:7,name:"Maule"},
{id:8,name:"Biobío"},
{id:9,name:"La Araucanía"},
{id:10,name:"Los Lagos"},
{id:11,name:"Aysén del General Carlos Ibáñez del Campo"},
{id:12,name:"Magallanes y de la Antártica Chilena"},
{id:13,name:"Metropolitana de Santiago"},
{id:14,name:"Los Ríos"},
{id:15,name:"Arica y Parinacota"}
]
var categorias = [
{id:1,name:"Iquique",idArea:1},
{id:2,name:"Tamarugal",idArea:1},
{id:3,name:"Antofagasta",idArea:2},
{id:4,name:"El Loa",idArea:2},
{id:5,name:"Tocopilla",idArea:2},
{id:6,name:"Copiapó",idArea:3},
{id:7,name:"Chañaral",idArea:3},
{id:8,name:"Huasco",idArea:3},
{id:9,name:"Elqui",idArea:4},
{id:10,name:"Choapa",idArea:4},
{id:11,name:"Limarí",idArea:4},
{id:12,name:"Valparaíso",idArea:5},
{id:13,name:"Isla De Pascua",idArea:5},
{id:14,name:"Los Andes",idArea:5},
{id:15,name:"Petorca",idArea:5},
{id:16,name:"Quillota",idArea:5},
{id:17,name:"San Antonio",idArea:5},
{id:18,name:"San Felipe",idArea:5},
{id:19,name:"Marga Marga",idArea:5},
{id:20,name:"Cachapoal",idArea:6},
{id:21,name:"Cardenal Caro",idArea:6},
{id:22,name:"Colchagua",idArea:6},
{id:23,name:"Talca",idArea:7},
{id:24,name:"Cauquenes",idArea:7},
{id:25,name:"Curicó",idArea:7},
{id:26,name:"Linares",idArea:7},
{id:27,name:"Concepción",idArea:8},
{id:28,name:"Arauco",idArea:8},
{id:29,name:"Bío-Bío",idArea:8},
{id:30,name:"Ñuble",idArea:8},
{id:31,name:"Cautín",idArea:9},
{id:32,name:"Malleco",idArea:9},
{id:33,name:"Llanquihue",idArea:10},
{id:34,name:"Chiloé",idArea:10},
{id:35,name:"Osorno",idArea:10},
{id:36,name:"Palena",idArea:10},
{id:37,name:"Coihayque",idArea:11},
{id:38,name:"Aisén",idArea:11},
{id:39,name:"Capitán Prat",idArea:11},
{id:40,name:"General Carrera",idArea:11},
{id:41,name:"Magallanes",idArea:12},
{id:42,name:"Antártica Chilena",idArea:12},
{id:43,name:"Tierra del Fuego",idArea:12},
{id:44,name:"Última Esperanza",idArea:12},
{id:45,name:"Santiago",idArea:13},
{id:46,name:"Cordillera",idArea:13},
{id:47,name:"Chacabuco",idArea:13},
{id:48,name:"Maipo",idArea:13},
{id:49,name:"Melipilla",idArea:13},
{id:50,name:"Talagante",idArea:13},
{id:51,name:"Valdivia",idArea:14},
{id:52,name:"Ranco",idArea:14},
{id:53,name:"Arica",idArea:15},
{id:54,name:"Parinacota",idArea:15},
]
var subCategorias = [
{id:1,name:"Iquique",idCategoria:1},
{id:2,name:"Alto Hospicio",idCategoria:1},
{id:3,name:"Pozo Almonte",idCategoria:2},
{id:4,name:"Camiña",idCategoria:2},
{id:5,name:"Colchane",idCategoria:2},
{id:6,name:"Huara",idCategoria:2},
{id:7,name:"Pica",idCategoria:2},
{id:8,name:"Antofagasta",idCategoria:3},
{id:9,name:"Mejillones",idCategoria:3},
{id:10,name:"Sierra Gorda",idCategoria:3},
{id:11,name:"Taltal",idCategoria:3},
{id:12,name:"Calama",idCategoria:4},
{id:13,name:"Ollague",idCategoria:4},
{id:14,name:"San Pedro De Atacama",idCategoria:4},
{id:15,name:"Tocopilla",idCategoria:5},
{id:16,name:"María Elena",idCategoria:5},
{id:17,name:"Copiapó",idCategoria:6},
{id:18,name:"Caldera",idCategoria:6},
{id:19,name:"Tierra Amarilla",idCategoria:6},
{id:20,name:"Chañaral",idCategoria:7},
{id:21,name:"Diego De Almagro",idCategoria:7},
{id:22,name:"Vallenar",idCategoria:8},
{id:23,name:"Alto Del Carmen",idCategoria:8},
{id:24,name:"Freirina",idCategoria:8},
{id:25,name:"Huasco",idCategoria:8},
{id:26,name:"La Serena",idCategoria:9},
{id:27,name:"Coquimbo",idCategoria:9},
{id:28,name:"Andacollo",idCategoria:9},
{id:29,name:"La Higuera",idCategoria:9},
{id:30,name:"Paiguano",idCategoria:9},
{id:31,name:"Vicuña",idCategoria:9},
{id:32,name:"Illapel",idCategoria:10},
{id:33,name:"Canela",idCategoria:10},
{id:34,name:"Los Vilos",idCategoria:10},
{id:35,name:"Salamanca",idCategoria:10},
{id:36,name:"Ovalle",idCategoria:11},
{id:37,name:"Combarbalá",idCategoria:11},
{id:38,name:"Monte Patria",idCategoria:11},
{id:39,name:"Punitaqui",idCategoria:11},
{id:40,name:"Río Hurtado",idCategoria:11},
{id:41,name:"Valparaíso",idCategoria:12},
{id:42,name:"Casablanca",idCategoria:12},
{id:43,name:"Concón",idCategoria:12},
{id:44,name:"Juan Fernández",idCategoria:12},
{id:45,name:"Puchuncaví",idCategoria:12},
{id:46,name:"Quintero",idCategoria:12},
{id:47,name:"Viña Del Mar",idCategoria:12},
{id:48,name:"Isla De Pascua",idCategoria:13},
{id:49,name:"Los Andes",idCategoria:14},
{id:50,name:"Calle Larga",idCategoria:14},
{id:51,name:"Rinconada",idCategoria:14},
{id:52,name:"San Esteban",idCategoria:14},
{id:53,name:"La Ligua",idCategoria:15},
{id:54,name:"Cabildo",idCategoria:15},
{id:55,name:"Papudo",idCategoria:15},
{id:56,name:"Petorca",idCategoria:15},
{id:57,name:"Zapallar",idCategoria:15},
{id:58,name:"Quillota",idCategoria:16},
{id:59,name:"Calera",idCategoria:16},
{id:60,name:"Hijuelas",idCategoria:16},
{id:61,name:"La Cruz",idCategoria:16},
{id:62,name:"Nogales",idCategoria:16},
{id:63,name:"San Antonio",idCategoria:17},
{id:64,name:"Algarrobo",idCategoria:17},
{id:65,name:"Cartagena",idCategoria:17},
{id:66,name:"El Quisco",idCategoria:17},
{id:67,name:"El Tabo",idCategoria:17},
{id:68,name:"Santo Domingo",idCategoria:17},
{id:69,name:"San Felipe",idCategoria:18},
{id:70,name:"Catemu",idCategoria:18},
{id:71,name:"Llaillay",idCategoria:18},
{id:72,name:"Panquehue",idCategoria:18},
{id:73,name:"Putaendo",idCategoria:18},
{id:74,name:"Santa María",idCategoria:18},
{id:75,name:"Quilpué",idCategoria:19},
{id:76,name:"Limache",idCategoria:19},
{id:77,name:"Olmué",idCategoria:19},
{id:78,name:"Villa Alemana",idCategoria:19},
{id:79,name:"Rancagua",idCategoria:20},
{id:80,name:"Codegua",idCategoria:20},
{id:81,name:"Coinco",idCategoria:20},
{id:82,name:"Coltauco",idCategoria:20},
{id:83,name:"Doñihue",idCategoria:20},
{id:84,name:"Graneros",idCategoria:20},
{id:85,name:"Las Cabras",idCategoria:20},
{id:86,name:"Machali",idCategoria:20},
{id:87,name:"Malloa",idCategoria:20},
{id:88,name:"Mostazal",idCategoria:20},
{id:89,name:"El Olivar",idCategoria:20},
{id:90,name:"Peumo",idCategoria:20},
{id:91,name:"Pichidegua",idCategoria:20},
{id:92,name:"Quinta De Tilcoco",idCategoria:20},
{id:93,name:"Rengo",idCategoria:20},
{id:94,name:"Requinoa",idCategoria:20},
{id:95,name:"San Vicente",idCategoria:20},
{id:96,name:"Pichilemu",idCategoria:21},
{id:97,name:"La Estrella",idCategoria:21},
{id:98,name:"Litueche",idCategoria:21},
{id:99,name:"Marchihue",idCategoria:21},
{id:100,name:"Navidad",idCategoria:21},
{id:101,name:"Paredones",idCategoria:21},
{id:102,name:"San Fernando",idCategoria:22},
{id:103,name:"Chépica",idCategoria:22},
{id:104,name:"Chimbarongo",idCategoria:22},
{id:105,name:"Lolol",idCategoria:22},
{id:106,name:"Nancagua",idCategoria:22},
{id:107,name:"Palmilla",idCategoria:22},
{id:108,name:"Peralillo",idCategoria:22},
{id:109,name:"Placilla",idCategoria:22},
{id:110,name:"Pumanque",idCategoria:22},
{id:111,name:"Santa Cruz",idCategoria:22},
{id:112,name:"Talca",idCategoria:23},
{id:113,name:"Constitución",idCategoria:23},
{id:114,name:"Curepto",idCategoria:23},
{id:115,name:"Empedrado",idCategoria:23},
{id:116,name:"Maule",idCategoria:23},
{id:117,name:"Pelarco",idCategoria:23},
{id:118,name:"Pencahue",idCategoria:23},
{id:119,name:"Río Claro",idCategoria:23},
{id:120,name:"San Clemente",idCategoria:23},
{id:121,name:"San Rafael",idCategoria:23},
{id:122,name:"Cauquenes",idCategoria:24},
{id:123,name:"Chanco",idCategoria:24},
{id:124,name:"Pelluhue",idCategoria:24},
{id:125,name:"Curicó",idCategoria:25},
{id:126,name:"Hualañe",idCategoria:25},
{id:127,name:"Licantén",idCategoria:25},
{id:128,name:"Molina",idCategoria:25},
{id:129,name:"Rauco",idCategoria:25},
{id:130,name:"Romeral",idCategoria:25},
{id:131,name:"Sagrada Familia",idCategoria:25},
{id:132,name:"Teno",idCategoria:25},
{id:133,name:"Vichuquén",idCategoria:25},
{id:134,name:"Linares",idCategoria:26},
{id:135,name:"Colbún",idCategoria:26},
{id:136,name:"Longaví",idCategoria:26},
{id:137,name:"Parral",idCategoria:26},
{id:138,name:"Retiro",idCategoria:26},
{id:139,name:"San Javier",idCategoria:26},
{id:140,name:"Villa Alegre",idCategoria:26},
{id:141,name:"Yerbas Buenas",idCategoria:26},
{id:142,name:"Concepción",idCategoria:27},
{id:143,name:"Coronel",idCategoria:27},
{id:144,name:"Chiguayante",idCategoria:27},
{id:145,name:"Florida",idCategoria:27},
{id:146,name:"Hualqui",idCategoria:27},
{id:147,name:"Lota",idCategoria:27},
{id:148,name:"Penco",idCategoria:27},
{id:149,name:"San Pedro de la Paz",idCategoria:27},
{id:150,name:"Santa Juana",idCategoria:27},
{id:151,name:"Talcahuano",idCategoria:27},
{id:152,name:"Tomé",idCategoria:27},
{id:153,name:"Hualpén",idCategoria:27},
{id:154,name:"Lebu",idCategoria:28},
{id:155,name:"Arauco",idCategoria:28},
{id:156,name:"Cañete",idCategoria:28},
{id:157,name:"Contulmo",idCategoria:28},
{id:158,name:"Curanilahue",idCategoria:28},
{id:159,name:"Los Alamos",idCategoria:28},
{id:160,name:"Tirua",idCategoria:28},
{id:161,name:"Los Angeles",idCategoria:29},
{id:162,name:"Antuco",idCategoria:29},
{id:163,name:"Cabrero",idCategoria:29},
{id:164,name:"Laja",idCategoria:29},
{id:165,name:"Mulchén",idCategoria:29},
{id:166,name:"Nacimiento",idCategoria:29},
{id:167,name:"Negrete",idCategoria:29},
{id:168,name:"Quilaco",idCategoria:29},
{id:169,name:"Quilleco",idCategoria:29},
{id:170,name:"San Rosendo",idCategoria:29},
{id:171,name:"Santa Bárbara",idCategoria:29},
{id:172,name:"Tucapel",idCategoria:29},
{id:173,name:"Yumbel",idCategoria:29},
{id:174,name:"Alto Biobío",idCategoria:29},
{id:175,name:"Chillán",idCategoria:30},
{id:176,name:"Bulnes",idCategoria:30},
{id:177,name:"Cobquecura",idCategoria:30},
{id:178,name:"Coelemu",idCategoria:30},
{id:179,name:"Coihueco",idCategoria:30},
{id:180,name:"Chillán Viejo",idCategoria:30},
{id:181,name:"El Carmen",idCategoria:30},
{id:182,name:"Ninhue",idCategoria:30},
{id:183,name:"Ñiquén",idCategoria:30},
{id:184,name:"Pemuco",idCategoria:30},
{id:185,name:"Pinto",idCategoria:30},
{id:186,name:"Portezuelo",idCategoria:30},
{id:187,name:"Quillón",idCategoria:30},
{id:188,name:"Quirihue",idCategoria:30},
{id:189,name:"Ranquil",idCategoria:30},
{id:190,name:"San Carlos",idCategoria:30},
{id:191,name:"San Fabián",idCategoria:30},
{id:192,name:"San Ignacio",idCategoria:30},
{id:193,name:"San Nicolás",idCategoria:30},
{id:194,name:"Treguaco",idCategoria:30},
{id:195,name:"Yungay",idCategoria:30},
{id:196,name:"Temuco",idCategoria:31},
{id:197,name:"Carahue",idCategoria:31},
{id:198,name:"Cunco",idCategoria:31},
{id:199,name:"Curarrehue",idCategoria:31},
{id:200,name:"Freire",idCategoria:31},
{id:201,name:"Galvarino",idCategoria:31},
{id:202,name:"Gorbea",idCategoria:31},
{id:203,name:"Lautaro",idCategoria:31},
{id:204,name:"Loncoche",idCategoria:31},
{id:205,name:"Melipeuco",idCategoria:31},
{id:206,name:"Nueva Imperial",idCategoria:31},
{id:207,name:"Padre Las Casas",idCategoria:31},
{id:208,name:"Perquenco",idCategoria:31},
{id:209,name:"Pitrufquén",idCategoria:31},
{id:210,name:"Pucón",idCategoria:31},
{id:211,name:"Saavedra",idCategoria:31},
{id:212,name:"Teodoro Schmidt",idCategoria:31},
{id:213,name:"Toltén",idCategoria:31},
{id:214,name:"Vilcún",idCategoria:31},
{id:215,name:"Villarrica",idCategoria:31},
{id:216,name:"Cholchol",idCategoria:31},
{id:217,name:"Angol",idCategoria:32},
{id:218,name:"Collipulli",idCategoria:32},
{id:219,name:"Curacautín",idCategoria:32},
{id:220,name:"Ercilla",idCategoria:32},
{id:221,name:"Lonquimay",idCategoria:32},
{id:222,name:"Los Sauces",idCategoria:32},
{id:223,name:"Lumaco",idCategoria:32},
{id:224,name:"Puren",idCategoria:32},
{id:225,name:"Renaico",idCategoria:32},
{id:226,name:"Traiguén",idCategoria:32},
{id:227,name:"Victoria",idCategoria:32},
{id:228,name:"Puerto Montt",idCategoria:33},
{id:229,name:"Calbuco",idCategoria:33},
{id:230,name:"Cochamó",idCategoria:33},
{id:231,name:"Fresia",idCategoria:33},
{id:232,name:"Frutillar",idCategoria:33},
{id:233,name:"Los Muermos",idCategoria:33},
{id:234,name:"Llanquihue",idCategoria:33},
{id:235,name:"Maullín",idCategoria:33},
{id:236,name:"Puerto Varas",idCategoria:33},
{id:237,name:"Castro",idCategoria:34},
{id:238,name:"Ancud",idCategoria:34},
{id:239,name:"Chonchi",idCategoria:34},
{id:240,name:"Curaco de Velez",idCategoria:34},
{id:241,name:"Dalcahue",idCategoria:34},
{id:242,name:"Puqueldón",idCategoria:34},
{id:243,name:"Queilén",idCategoria:34},
{id:244,name:"Quellón",idCategoria:34},
{id:245,name:"Quemchi",idCategoria:34},
{id:246,name:"Quinchao",idCategoria:34},
{id:247,name:"Osorno",idCategoria:35},
{id:248,name:"Puerto Octay",idCategoria:35},
{id:249,name:"Purranque",idCategoria:35},
{id:250,name:"Puyehue",idCategoria:35},
{id:251,name:"Río Negro",idCategoria:35},
{id:252,name:"San Juan de la Costa",idCategoria:35},
{id:253,name:"San Pablo",idCategoria:35},
{id:254,name:"Chaitén",idCategoria:36},
{id:255,name:"Futaleufú",idCategoria:36},
{id:256,name:"Hualaihue",idCategoria:36},
{id:257,name:"Palena",idCategoria:36},
{id:258,name:"Coihayque",idCategoria:37},
{id:259,name:"Lago Verde",idCategoria:37},
{id:260,name:"Aisén",idCategoria:38},
{id:261,name:"Cisnes",idCategoria:38},
{id:262,name:"Guaitecas",idCategoria:38},
{id:263,name:"Cochrane",idCategoria:39},
{id:264,name:"O'Higgins",idCategoria:39},
{id:265,name:"Tortel",idCategoria:39},
{id:266,name:"Chile Chico",idCategoria:40},
{id:267,name:"Río Ibáñez",idCategoria:40},
{id:268,name:"Punta Arenas",idCategoria:41},
{id:269,name:"Laguna Blanca",idCategoria:41},
{id:270,name:"Río Verde",idCategoria:41},
{id:271,name:"San Gregorio",idCategoria:41},
{id:272,name:"Cabo de Hornos",idCategoria:42},
{id:273,name:"Antártica",idCategoria:42},
{id:274,name:"Porvenir",idCategoria:43},
{id:275,name:"Primavera",idCategoria:43},
{id:276,name:"Timaukel",idCategoria:43},
{id:277,name:"Natales",idCategoria:44},
{id:278,name:"Torres del Paine",idCategoria:44},
{id:279,name:"Santiago",idCategoria:45},
{id:280,name:"Cerrillos",idCategoria:45},
{id:281,name:"Cerro Navia",idCategoria:45},
{id:282,name:"Conchalí",idCategoria:45},
{id:283,name:"El Bosque",idCategoria:45},
{id:284,name:"Estación Central",idCategoria:45},
{id:285,name:"Huechuraba",idCategoria:45},
{id:286,name:"Independencia",idCategoria:45},
{id:287,name:"La Cisterna",idCategoria:45},
{id:288,name:"La Florida",idCategoria:45},
{id:289,name:"La Granja",idCategoria:45},
{id:290,name:"La Pintana",idCategoria:45},
{id:291,name:"La Reina",idCategoria:45},
{id:292,name:"Las Condes",idCategoria:45},
{id:293,name:"Lo Barnechea",idCategoria:45},
{id:294,name:"Lo Espejo",idCategoria:45},
{id:295,name:"Lo Prado",idCategoria:45},
{id:296,name:"Macul",idCategoria:45},
{id:297,name:"Maipú",idCategoria:45},
{id:298,name:"Ñuñoa",idCategoria:45},
{id:299,name:"Pedro Aguirre Cerda",idCategoria:45},
{id:300,name:"Peñalolén",idCategoria:45},
{id:301,name:"Providencia",idCategoria:45},
{id:302,name:"Pudahuel",idCategoria:45},
{id:303,name:"Quilicura",idCategoria:45},
{id:304,name:"Quinta Normal",idCategoria:45},
{id:305,name:"Recoleta",idCategoria:45},
{id:306,name:"Renca",idCategoria:45},
{id:307,name:"San Joaquín",idCategoria:45},
{id:308,name:"San Miguel",idCategoria:45},
{id:309,name:"San Ramón",idCategoria:45},
{id:310,name:"Vitacura",idCategoria:45},
{id:311,name:"Puente Alto",idCategoria:46},
{id:312,name:"Pirque",idCategoria:46},
{id:313,name:"San José De Maipo",idCategoria:46},
{id:314,name:"Colina",idCategoria:47},
{id:315,name:"Lampa",idCategoria:47},
{id:316,name:"Tiltil",idCategoria:47},
{id:317,name:"San Bernardo",idCategoria:48},
{id:318,name:"Buin",idCategoria:48},
{id:319,name:"Calera De Tango",idCategoria:48},
{id:320,name:"Paine",idCategoria:48},
{id:321,name:"Melipilla",idCategoria:49},
{id:322,name:"Alhué",idCategoria:49},
{id:323,name:"Curacaví",idCategoria:49},
{id:324,name:"María Pinto",idCategoria:49},
{id:325,name:"San Pedro",idCategoria:49},
{id:326,name:"Talagante",idCategoria:50},
{id:327,name:"El Monte",idCategoria:50},
{id:328,name:"Isla De Maipo",idCategoria:50},
{id:329,name:"Padre Hurtado",idCategoria:50},
{id:330,name:"Peñaflor",idCategoria:50},
{id:331,name:"Valdivia",idCategoria:51},
{id:332,name:"Corral",idCategoria:51},
{id:333,name:"Lanco",idCategoria:51},
{id:334,name:"Los Lagos",idCategoria:51},
{id:335,name:"Máfil",idCategoria:51},
{id:336,name:"Mariquina",idCategoria:51},
{id:337,name:"Paillaco",idCategoria:51},
{id:338,name:"Panguipulli",idCategoria:51},
{id:339,name:"La Unión",idCategoria:52},
{id:340,name:"Futrono",idCategoria:52},
{id:341,name:"Lago Ranco",idCategoria:52},
{id:342,name:"Río Bueno",idCategoria:52},
{id:343,name:"Arica",idCategoria:53},
{id:344,name:"Camarones",idCategoria:53},
{id:345,name:"Putre",idCategoria:54},
{id:346,name:"General Lagos",idCategoria:54},
]
//creando los options de area
var areasSelect = document.getElementById('areas');
var categoriasSelect = document.getElementById('categorias');
var subCategoriasSelect = document.getElementById('subCategorias');
areasSelect.addEventListener("change", cargarCategorias);
categoriasSelect.addEventListener("change", cargarSubCategorias);
areas.forEach(function(area){
let opcion = document.createElement('option')
opcion.value = area.id
opcion.text = area.name
areasSelect.add(opcion)
})
function cargarCategorias(){
categoriasSelect.options.length = 1;
subCategoriasSelect.options.length = 1;
categorias
.filter(function (categoria){
return categoria.idArea == this;
}, areasSelect.value)
.forEach(function(categoria){
let opcion = document.createElement('option')
opcion.value = categoria.id
opcion.text = categoria.name
categoriasSelect.add(opcion);
});
}
function cargarSubCategorias(){
subCategoriasSelect.options.length = 1;
subCategorias
.filter(function (subCategoria){
return subCategoria.idCategoria == this;
}, categoriasSelect.value)
.forEach(function(subCategoria){
let opcion = document.createElement('option')
opcion.value = subCategoria.id
opcion.text = subCategoria.name
subCategoriasSelect.add(opcion);
});
}
</script>