Dviejopomata/datos.json

## datos.json
{
  "provincias": [
    {
      "origen": "Alicante",
      "destinos": ["Madrid", "Barcelona"]
    },
    {
      "origen": "Madrid",
      "destinos": ["Barcelona", "Valencia", "Sevilla"]
    },
    {
      "origen": "Barcelona",
      "destinos": ["Madrid", "Zaragoza"]
    }
  ]
}

## index.html
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <title> Ejemplo del uso de JavaScript </title>

    <style>
        div {
            text-align: center
        }
    </style>
</head>

<body>
    <form name="formulario">
        <div>
            Origen:
            <select id="provincia_origen"></select>
            <select id="provincia_destino"></select>
        </div>
    </form>
    <script>
        function inicializarPagina(datos) {
            // inicializamos las variables de los selects
            var provinciaOrigen = document.getElementById('provincia_origen');
            var provinciaDestino = document.getElementById('provincia_destino');
            // cargamos las provincias origen
            for (i = 0; i < datos.provincias.length; i++) {
                var provincia = datos.provincias[i]
                provinciaOrigen.options[i] = new Option(provincia.origen, provincia.origen);
            }

            // function para cargar las provincias destino en base a una provincia origen
            function cargarProvinciasDestino(provinciaOrigen) {
                // reseteamos todas las opciones del select de las provincias destino
                provinciaDestino.options.length = 0;
                // buscamos la provincia en el json
                var provinciaSeleccionada = datos.provincias.find(provincia => provincia.origen === provinciaOrigen)
                // anadimos las provincias destino al select
                for (i = 0; i < provinciaSeleccionada.destinos.length; i++) {
                    provinciaDestino[i] = new Option(provinciaSeleccionada.destinos[i], provinciaSeleccionada.destinos[i]);
                }
            }

            // en el cambio de las provincias origen, vamos a cargar las provincias destino
            provinciaOrigen.onchange = function (e) {
                cargarProvinciasDestino(e.target.value);
            }
            // por defecto cargamos las provincias destino de el primer origen
            cargarProvinciasDestino(datos.provincias[0].origen)
        }
        // creamos el xmlhttprequest
        var xmlhttp = new XMLHttpRequest();
        // nombre del fichero
        var fichero = "datos.json";
        // function que se ejecuta cuando la peticion es correcta
        xmlhttp.onreadystatechange = function () {
            if (this.readyState == 4 && this.status == 200) {
                // parseamos el texto a un JSON
                var datos = JSON.parse(this.responseText);
                // inicializamos la pagina con los datos del servidor
                inicializarPagina(datos)
            }
        };
        // realizamos la peticion
        xmlhttp.open("GET", fichero, true);
        xmlhttp.send();

    </script>
</body>

</html>
	{
	"provincias": [
	{
	"origen": "Alicante",
	"destinos": ["Madrid", "Barcelona"]
	},
	{
	"origen": "Madrid",
	"destinos": ["Barcelona", "Valencia", "Sevilla"]
	},
	{
	"origen": "Barcelona",
	"destinos": ["Madrid", "Zaragoza"]
	}
	]
	}
	<!DOCTYPE html>
	<html>

	<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title> Ejemplo del uso de JavaScript </title>

	<style>
	div {
	text-align: center
	}
	</style>
	</head>

	<body>
	<form name="formulario">
	<div>
	Origen:
	<select id="provincia_origen"></select>
	<select id="provincia_destino"></select>
	</div>
	</form>
	<script>
	function inicializarPagina(datos) {
	// inicializamos las variables de los selects
	var provinciaOrigen = document.getElementById('provincia_origen');
	var provinciaDestino = document.getElementById('provincia_destino');
	// cargamos las provincias origen
	for (i = 0; i < datos.provincias.length; i++) {
	var provincia = datos.provincias[i]
	provinciaOrigen.options[i] = new Option(provincia.origen, provincia.origen);
	}

	// function para cargar las provincias destino en base a una provincia origen
	function cargarProvinciasDestino(provinciaOrigen) {
	// reseteamos todas las opciones del select de las provincias destino
	provinciaDestino.options.length = 0;
	// buscamos la provincia en el json
	var provinciaSeleccionada = datos.provincias.find(provincia => provincia.origen === provinciaOrigen)
	// anadimos las provincias destino al select
	for (i = 0; i < provinciaSeleccionada.destinos.length; i++) {
	provinciaDestino[i] = new Option(provinciaSeleccionada.destinos[i], provinciaSeleccionada.destinos[i]);
	}
	}

	// en el cambio de las provincias origen, vamos a cargar las provincias destino
	provinciaOrigen.onchange = function (e) {
	cargarProvinciasDestino(e.target.value);
	}
	// por defecto cargamos las provincias destino de el primer origen
	cargarProvinciasDestino(datos.provincias[0].origen)
	}
	// creamos el xmlhttprequest
	var xmlhttp = new XMLHttpRequest();
	// nombre del fichero
	var fichero = "datos.json";
	// function que se ejecuta cuando la peticion es correcta
	xmlhttp.onreadystatechange = function () {
	if (this.readyState == 4 && this.status == 200) {
	// parseamos el texto a un JSON
	var datos = JSON.parse(this.responseText);
	// inicializamos la pagina con los datos del servidor
	inicializarPagina(datos)
	}
	};
	// realizamos la peticion
	xmlhttp.open("GET", fichero, true);
	xmlhttp.send();

	</script>
	</body>

	</html>