La verdad es que no he entendido muy bien cual es el problema... pero... te estas complicando demasiado. Por lo que veo de código que has expuesto, estas usando un select con literalmente miles de municipios. Eso es una carga muy pesada tanto para el servidor como para el navegador del cliente y muy poco práctico para futuras actualizaciones.
Yo te sugeriría que empieces a leer sobre lazy loading y peticiones AJAX. Te va a facilitar la vida y te ayudará a desarrollar aplicaciones fácilmente actualizables. El ejemplo que te muestro a continuación es muy básico con arrays en PHP, lo ideal seria utilizar base de datos pero bueno...
Codigo HTML<select id='selectCuidades' data-tipo='cuidades'>
<select id='selectLocalidades' data-tipo='localidades'>
Codigo JS (localidades.js)// Es mejor esperar a que este cargado todo el DOM.
document.addEventListener('DOMContentLoaded', function(e){
// Cargar la primera vez. En este caso cargaria las cuidades con indice
// 0 en $cuidades del PHP.
cargarOpciones('cuidades', 0, function(opciones){
pintarOpciones('selectCuidades', opciones);
});
// Cuando el select "selectCuidades" cambie, obtendra la cuidad selecionada
// su valor y realizara una consulta para obtener las localidades pertinentes
// a esa cuidad.
document.getElementById('selectCuidades').addEventListener('change', function(e){
var index = this.options[this.selectedIndex].value; // valor del elemento seleccionado
cargarOpciones('localidades', index, function(opciones){
pintarOpciones('selectLocalidades', opciones);
});
});
});
/**
* Hace un AJAX a un archivo PHP que le da las opciones para cada cuidad.
* Si le retorna un error, avisa de ello mediante alert.
*
* @param {string} tipo
* @param {integer} valor
* @param {function||object} callback
*/
var cargarOpciones = (function(tipo, valor, callback){
var url = 'localidades.php?tipo='+tipo+'&index='+valor;
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
var data = JSON.parse(request.responseText);
if(data.error) {
alert('No existen datos');
return false;
}
callback(data);
}
};
request.send();
});
/**
* Pinta los elementos que ha obtenido dentro de un select con el id indicado.
*
* @param {integer} idElemento
* @param {array} opciones
*/
var pintarOpciones = (function(idElemento, opciones){
var elemento = document.getElementById(idElemento);
elemento.innerHTML = '';
opciones.forEach(function(valor, index){
var opcion = document.createElement('option');
opcion.value = index;
opcion.innerText = valor;
elemento.appendChild(opcion);
});
});
Codigo PHP (localidades.php)<?php
0 => 'Adolfo Alsina',
1 => 'Adolfo González Chavez',
2 => 'Alberti',
)
);
0 => array( // El 0 representa el 0 de $cuidades (Adolfo Alsina) 0 => 'Carhué',
1 => 'Rivera',
2 => 'Villa Maza',
3 => 'San Miguel Arcángel',
4 => 'Esteban Agustín Gascón',
5 => 'Delfín Huergo',
6 => 'La Pala',
7 => 'Thames',
8 => 'Yutuyaco',
),
1 => array( // Lo mismo, representa el 1 de 1 de $cuidades (adolfo Gonzalez) 0 => 'Gonzáles Chaves',
1 => 'De la Garma',
2 => 'Juan Eulogio Barra',
3 => 'Vásquez',
),
0 => 'Alberti',
1 => 'Mechita',
2 => 'Villa Ortiz',
3 => 'Plá',
4 => 'Coronel Seguí',
5 => 'Villa Grisolía',
6 => 'Villa María',
7 => 'Gobernador Ugarte',
),
);
$tipo = $_GET['tipo']; // cuidades o localidades
$valor = (int) $_GET['index']; // esperamos un valor solo numerico
$resultado = array('error' => 'no encontrado'); // si no encuentra nada...
switch($tipo) {
case 'cuidades':
if (isset($cuidades[$valor])) { $resultado = $cuidades[$valor];
}
break;
case 'localidades':
if (isset($localidades[$valor])) { $resultado = $localidades[$valor];
}
break;
}
?>
Esto incluso se puede simplificar aún más haciendo que PHP imprima los option en vez de crearlos con JS pero es mejor que los cree el propio navegador.
https://es.wikipedia.org/wiki/Lazy_loadinghttps://www.w3schools.com/xml/ajax_intro.asphttps://es.wikipedia.org/wiki/JSONSaludos