tengo un formulario, y a la hora de ir seleccionando el continente, pais, comunidad autonoma, me gustaria quitar los paises que no tengan que ver con el continente seleccionado. Es decir, que al seleccionar Europa aparezca España, Francia y Portugal, y si selecciono otro Continente como America, pues que desaparezca de la lista los paises europeos y solo salgan EEUU y Canada, por ejemplo.
Mas o menos tengo esto, pero necesito quitar los campos de :
Extension Territorial
Numero de Habitantes
Moneda
enviar
pero cuando los quito da no se muestran los paises por continente
gracias
<html>
<head>
<title>Datos de paises de centro america</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, itial-scale=1.0 maximun-scale1.0, minimun-scale=1.0"/>
<meta name="description" content="ejercicios con javascript que permite obtener datos de los paises de centroamerica"/>
<meta name="keywords" content="ejercicio_paises, javascript, html, css"/>
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Days+One" rel="stylesheet">
</head>
<body>
<div id="container">
<form name="frmpaises" id="frmpaises">
<fieldset>
<legend>Capturando Datos</legend>
<div>
<label for="nombre">Región</label>
<select name="pcentro" id="pcentro" onchange="cambiar_pais(this.id, 'capital','moneda')">
<option value="0" selected>Elija un Pais</option>
<option value="Europa" >Europa</option>
<option value="Latinoamérica">Latinoamérica</option>
<option value="América Central">América Central</option>
<option value="Estados Unidos">Estados Unidos</option>
</select>
</div>
<div>
<label >Capital</label>
<select name="capital" id="capital" readonl></select>
</div>
<div>
<label>Extension Territorial</label>
<input name="ext" type="num" id="Extension" maxlength="7" />
</div>
<div>
<label>Numero de Habitantes</label>
<input name="hab" type="num" id="Nhabitantes" maxlength="7" />
</div>
<div>
<label>Moneda</label>
<select name="moneda" id="moneda" readonly></select>
</div>
<input name="enviar" type="button" id="btnenviar" value="ENVIAR" onclick="mostrar()"></input>
</fieldset>
</form>
<div name="mostrar_tabla">
</div>
</div>
<script type="text/javascript" src="js/mis_funciones.js"></script>
<script type="text/javascript" src="js/consulta.js"></script>
</body>
</html>
function cambiar_pais(s1,s2, s3){
var s1 = document.getElementById(s1);
var s2 = document.getElementById(s2);
var s3 = document.getElementById(s3);
s2.innerHTML = "";
s3.innerHTML= "";
if(s1.value == "Europa"){
var optionArray = ["España|España", "Portugal|Portugal" , "Alemania|Alemania", "Francia|Francia", "Inglaterra|Inglaterra"];
} else if(s1.value == "Latinoamérica"){
var optionArray = ["argentina|Argentina", "colombia|Colombia", "perú|Perú" ];
}else if(s1.value == "América Central"){
var optionArray = ["México|México"];
}else if(s1.value == "Estados Unidos"){
var optionArray = ["Miami|Miami"];
}else if(s1.value == "Nicaragua"){
var optionArray = ["managua|Managua"];
}else if(s1.value == "Costa Rica"){
var optionArray = ["san jose|San Jose"];
}else if(s1.value == "Panama"){
var optionArray = ["ciudad de panama|Ciudad de Panama"];
}
for(var option in optionArray){
var pair = optionArray[option].split("|");
var newOption = document.createElement("option");
newOption.value = pair[0];
newOption.innerHTML = pair[1];
s2.options.add(newOption);
}
}
function mostrar()
{
var pcentro=document.getElementById("pcentro");
var capital=document.getElementById("capital");
document.write(
"<table cellpadding='5' cellspacing='0' border='1'>" +
"<tr><td>DATOS</td><td>INFORMACION</td></tr>"+
"<tr><td>"+pcentro.value+"</td>
<td>"+capital.value+"</td>
</table>"
);
}
SELECT id="moneda"
tienes que cambiar elonchange()
y la funcióncambiar_pais()
ya que te sobra el tercer argumento y els3.innerHTML = "";
te da error.