2

document.addEventListener("DOMContentLoaded", function(event) {
  /*Asignar en este bloque todo lo relativo al DOM, como escucha de eventos*/
  var selPaises = document.getElementById('pais');
  /*Aquí indicamos que cuando cambie una opción se ejecute cambioOpciones*/
  selPaises.addEventListener("change", cambioOpciones, false);

});

function cambioOpciones(e) {
  var ibxCode = document.getElementById('indicativo');
  var mPais = e.target.value;
  var mCodes = {
      Afghanistan:93,
      Albania:355,
      Alemania:49,
      Algeria:213,
      Andorra:376,
      Angola:244,
      Anguilla:1000,
      Antárctica:672,
      Antigua:1001,
      Antillas Francesas:596,
      Antillas Holandesas:599,
      Arabia Saudita:966,
      Argentina:54,
      Armenia:374,
      Aruba:297,
      Australia:61,
      Austria:43,
      Azerbaiján:994,
      Bahamas:1002,
      Bahía de Guantanamo:539,
      Bahrain:973,
      Bangladesh:880,
      Barbados:1003,
      Belgica:32,
      Belice:501,
      Benin:229,
      Bermuda:1004,
      Bhutan:975,
      Bolivia:591,
      Bosnia y Herzegovina:387,
      Botswana:267,
      Brasil:55,
      Brunei:673,
      Bulgaria:359,
      Burkina Faso:226,
      Burma, Myanmar:95,
      Burundi:257,
      Cambodia:855,
      Camerún:237,
      Canada, Estados Unidos:1,
      Colombia:57,
      Comoros:269,
      Congo:242,
      Corea:82,
      Corea del Norte:850,
      Costa de Marfil:225,
      Costa Rica:506,
      Croacia:385,
      Cuba:53,
      Chad:235,
      Chile:56,
      China:86,
      Chipre:357
  /*  Dinamarca:45,
      Djibouti:253,
      Dominica:1007,
      Ecuador:593,
      Egipto:20,
      El Salvador:503,
      Emiratos Arabes Unidos:971,
      Eritea:291,
      Eslovaquia, Slovakia :421,
      España:34,
      Estonia:372,
      Etiopía:251,
      Filipinas:63,
      Finlandia:358,
      Francia:33,
      Gambia:220,
      Georgia:995,
      Ghana:233,
      Gibraltar:350,
      Granada:1009,
      Grecia:30,
      Groelandia:299,
      Guadalupe:590,
      Guam:1671,
      Guatemala:502,
      Guinea:224,
      Guinea-Bissau:245,
      Guinea Ecuatorial:240,
      Guyana:592,
      Guyana Francesa:594,
      Haití:509,
      Honduras:504,
      Hong Kong:852,
      Holanda:31,
      Hungría:36,
      India:91,
      Indonesia:62,
      Inglaterra Reino Unido:44,
      Irán:98,
      Iraq:964,
      Irlanda:353,
      Isla Cabo Verde:238,
      Isla Navidad:6724,
      Isla Norforlk:6723,
      Isla Reunión:262,
      Islandía:354,
      Islas Ascención:247,
      Islas Caimán:1006,
      Islas Cook:682,
      Islas Faroe:298,
      Islas Fiji:679,
      Islas Maldivas:960,
      Islas Malvinas:500,
      Islas Marshall:692,
      Islas Mauricio:230,
      Isla Mayotte:2696,
      Islas Salomón:677,
      Isla Seychelles:248,
      Islas Tonga:676,
      Islas Vírgenes Británicas:284,
      Israel:972,
      Italia:39,
      Jamaica:1010,
      Japón:81,
      Jordania:962,
      Kazakhstán:731,
      Kenia:254,
      Kiribati:686,
      Kuwait:965,
      Kyrgyzstán:733,
      Laos:856,
      Latvia:371,
      Lesoto:266,
      Líbano:961,
      Liberia:231,
      Libia:218,
      Liechtenstein:417,
      Lituania:370,
      Luxemburgo:352,
      Macao:853,
      Macedonia:389,
      Madagascar:261,
      Malasia:60,
      Malawi:265,
      Malta:356,
      Marruecos:212,
      Mauritania:222,
      México:52,
      Micronesia:691,
      Moldova:373,
      Mónaco:377,
      Mongolia:976,
      Montserrat:1011,
      Mozambique:258,
      Namibia:264,
      Nauru:674,
      Nepal:977,
      Nevis:1012,
      Nicaragua:505,
      Niger:227,
      Nigeria:234,
      Niue:683,
      Noruega:47,
      Nueva Caledonia:687,
      Nueva Zelanda:64,
      Omán:968,
      Pakistan:92,
      Palau:680,
      Panamá:507,
      Papua Nueva Guinea:675,
      Paraguay:595,
      Perú:51,
      Polonia:48,
      Portugal:351,
      Puerto Rico:1787,
      Qatar:974,
      República Central Africana:236,
      República Checa:42,
      República Dominicana:1008,
      República Gabona:241,
      República de Mali:223,
      República de Senegal:221,
      República de Vanuatú:7377,
      Rumanía:40,
      Russia:7,
      Rwanda:250,
      Saipán:1670,
      Samoa Americana:684,
      Samoa Oeste:685,
      San Croix, San John, San Thomas, Islas Vírgenes Americanas:340,
      San Kitts:1013,
      San Marino:378,
      San Vicente:1015,
      Santa Elena:290,
      Santa Lucia:1014,
      Santa Piera y Miquelón:508,
      Sao Tome:239,
      Sierra Leona:232,
      Singapur:65,
      Siria:963,
      Slovenia:386,
      Somalía:252,
      Sri Lanka:94,
      Sudáfrica:27,
      Sudán:249,
      Suecia:46,
      Suiza:41,
      Surinam:597,
      Swazilandia:268,
      Tahití Polinesia Francesa:689,
      Tailandía:66,
      Taiwan:886,
      Tajikstan:73,
      Tanzania:255,
      Togo:228,
      Trinidad y Tobago:1016,
      Tunisia:216,
      Turquía:90,
      Turkmenistán:993,
      Tuvalú:688,
      Uganda:256,
      Ukrania:380,
      Uruguay:598,
      Uzbekistán:737,
      Vaticano:396,
      Venezuela:58,
      Vietnam:84,
      Wallis y Futuna:681,
      Yemen:967,
      Yugoslavia:381,
      Zaire:243,
      Zambia:260,
      Zimbabwe:263*/
  };
  var thisCode = mCodes[mPais] || 0;
  ibxCode.value = thisCode;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <script type="text/javascript"></script>
	<title>help</title>	
</head>
<body>	
	<div>
		<label>
			País
		</label>
			<select name="pais_txt" id="pais" required>
							<option value="Afghanistan">	Afghanistan	</option>
							<option value="Albania">	Albania	</option>
							<option value="Alemania">	Alemania	</option>
							<option value="Algeria">	Algeria	</option>
							<option value="Andorra">	Andorra	</option>
							<option value="Angola">	Angola	</option>
							<option value="Anguilla">	Anguilla	</option>
							<option value="Antárctica">	Antárctica	</option>
							<option value="Antigua">	Antigua	</option>
							<option value="Antillas Francesas">	Antillas Francesas	</option>
							<option value="Antillas Holandesas">	Antillas Holandesas	</option>
							<option value="Arabia Saudita">	Arabia Saudita	</option>
							<option value="Argentina">	Argentina	</option>
							<option value="Armenia">	Armenia	</option>
							<option value="Aruba">	Aruba	</option>
							<option value="Australia">	Australia	</option>
							<option value="Austria">	Austria	</option>
							<option value="Azerbaiján">	Azerbaiján	</option>
							<option value="Bahamas">	Bahamas	</option>
							<option value="Bahía de Guantanamo">	Bahía de Guantanamo	</option>
							<option value="Bahrain">	Bahrain	</option>
							<option value="Bangladesh">	Bangladesh	</option>
							<option value="Barbados">	Barbados	</option>
							<option value="Belgica">	Belgica	</option>
							<option value="Belice">	Belice	</option>
							<option value="Benin">	Benin	</option>
							<option value="Bermuda">	Bermuda	</option>
							<option value="Bhutan">	Bhutan	</option>
							<option value="Bolivia">	Bolivia	</option>
							<option value="Bosnia y Herzegovina">	Bosnia y Herzegovina	</option>
							<option value="Botswana">	Botswana	</option>
							<option value="Brasil">	Brasil	</option>
							<option value="Brunei">	Brunei	</option>
							<option value="Bulgaria">	Bulgaria	</option>
							<option value="Burkina Faso">	Burkina Faso	</option>
							<option value="Burma, Myanmar">	Burma, Myanmar	</option>
							<option value="Burundi">	Burundi	</option>
							<option value="Cambodia">	Cambodia	</option>
							<option value="Camerún">	Camerún	</option>
							<option value="Canada, Estados Unidos">	Canada, Estados Unidos	</option>
							<option value="Colombia">	Colombia	</option>
							<option value="Comoros">	Comoros	</option>
							<option value="Congo">	Congo	</option>
							<option value="Corea">	Corea	</option>
							<option value="Corea del Norte">	Corea del Norte	</option>
							<option value="Costa de Marfil">	Costa de Marfil	</option>
							<option value="Costa Rica">	Costa Rica	</option>
							<option value="Croacia">	Croacia	</option>
							<option value="Cuba">	Cuba	</option>
							<option value="Chad">	Chad	</option>							
							<option value="Chile">	Chile	</option>
							<option value="China">	China	</option>
							<option value="Chipre">	Chipre	</option>
				<!--		<option value="Dinamarca"	data-code="45">	Dinamarca	</option>
							<option value="Djibouti"	data-code="253">	Djibouti	</option>
							<option value="Dominica"	data-code="1007">	Dominica	</option>
							<option value="Ecuador"	data-code="593">	Ecuador	</option>
							<option value="Egipto"	data-code="20">	Egipto	</option>
							<option value="El Salvador"	data-code="503">	El Salvador	</option>
							<option value="Emiratos Arabes Unidos"	data-code="971">	Emiratos Arabes Unidos	</option>
							<option value="Eritea"	data-code="291">	Eritea	</option>
							<option value="Eslovaquia, Slovakia"	data-code="421">	Eslovaquia, Slovakia 	</option>
							<option value="España"	data-code="34">	España	</option>
							<option value="Estonia"	data-code="372">	Estonia	</option>
							<option value="Etiopía"	data-code="251">	Etiopía	</option>
							<option value="Filipinas"	data-code="63">	Filipinas	</option>
							<option value="Finlandia"	data-code="358">	Finlandia	</option>
							<option value="Francia"	data-code="33">	Francia	</option>
							<option value="Gambia"	data-code="220">	Gambia	</option>
							<option value="Georgia"	data-code="995">	Georgia	</option>
							<option value="Ghana"	data-code="233">	Ghana	</option>
							<option value="Gibraltar"	data-code="350">	Gibraltar	</option>
							<option value="Granada"	data-code="1009">	Granada	</option>
							<option value="Grecia"	data-code="30">	Grecia	</option>
							<option value="Groelandia"	data-code="299">	Groelandia	</option>
							<option value="Guadalupe"	data-code="590">	Guadalupe	</option>
							<option value="Guam"	data-code="1671">	Guam	</option>
							<option value="Guatemala"	data-code="502">	Guatemala	</option>
							<option value="Guinea"	data-code="224">	Guinea	</option>
							<option value="Guinea-Bissau"	data-code="245">	Guinea-Bissau	</option>
							<option value="Guinea Ecuatorial"	data-code="240">	Guinea Ecuatorial	</option>
							<option value="Guyana"	data-code="592">	Guyana	</option>
							<option value="Guyana Francesa"	data-code="594">	Guyana Francesa	</option>
							<option value="Haití"	data-code="509">	Haití	</option>
							<option value="Honduras"	data-code="504">	Honduras	</option>
							<option value="Hong Kong"	data-code="852">	Hong Kong	</option>
							<option value="Holanda"	data-code="31">	Holanda	</option>
							<option value="Hungría"	data-code="36">	Hungría	</option>
							<option value="India"	data-code="91">	India	</option>
							<option value="Indonesia"	data-code="62">	Indonesia	</option>
							<option value="Inglaterra(Reino Unido)"	data-code="44">	Inglaterra(Reino Unido)	</option>
							<option value="Irán"	data-code="98">	Irán	</option>
							<option value="Iraq"	data-code="964">	Iraq	</option>
							<option value="Irlanda"	data-code="353">	Irlanda	</option>
							<option value="Isla Cabo Verde"	data-code="238">	Isla Cabo Verde	</option>
							<option value="Isla Navidad"	data-code="6724">	Isla Navidad	</option>
							<option value="Isla Norforlk"	data-code="6723">	Isla Norforlk	</option>
							<option value="Isla Reunión"	data-code="262">	Isla Reunión	</option>
							<option value="Islandía"	data-code="354">	Islandía	</option>
							<option value="Islas Ascención"	data-code="247">	Islas Ascención	</option>
							<option value="Islas Caimán"	data-code="1006">	Islas Caimán	</option>
							<option value="Islas Cook"	data-code="682">	Islas Cook	</option>
							<option value="Islas Faroe"	data-code="298">	Islas Faroe	</option>
							<option value="Islas Fiji"	data-code="679">	Islas Fiji	</option>
							<option value="Islas Maldivas"	data-code="960">	Islas Maldivas	</option>
							<option value="Islas Malvinas"	data-code="500">	Islas Malvinas	</option>
							<option value="Islas Marshall"	data-code="692">	Islas Marshall	</option>
							<option value="Islas Mauricio"	data-code="230">	Islas Mauricio	</option>
							<option value="Isla Mayotte"	data-code="2696">	Isla Mayotte	</option>
							<option value="Islas Salomón"	data-code="677">	Islas Salomón	</option>
							<option value="Isla Seychelles"	data-code="248">	Isla Seychelles	</option>
							<option value="Islas Tonga"	data-code="676">	Islas Tonga	</option>
							<option value="Islas Vírgenes Británicas"	data-code="284">	Islas Vírgenes Británicas	</option>
							<option value="Israel"	data-code="972">	Israel	</option>
							<option value="Italia"	data-code="39">	Italia	</option>
							<option value="Jamaica"	data-code="1010">	Jamaica	</option>
							<option value="Japón"	data-code="81">	Japón	</option>
							<option value="Jordania" data-code="962">	Jordania	</option>
							<option value="Kazakhstán"	data-code="731">	Kazakhstán	</option>
							<option value="Kenia"	data-code="254">	Kenia	</option>
							<option value="Kiribati"	data-code="686">	Kiribati	</option>
							<option value="Kuwait"	data-code="965">	Kuwait	</option>
							<option value="Kyrgyzstán"	data-code="733">	Kyrgyzstán	</option>
							<option value="Laos"	data-code="856">	Laos	</option>
							<option value="Latvia"	data-code="371">	Latvia	</option>
							<option value="Lesoto"	data-code="266">	Lesoto	</option>
							<option value="Líbano"	data-code="961">	Líbano	</option>
							<option value="Liberia"	data-code="231">	Liberia	</option>
							<option value="Libia"	data-code="218">	Libia	</option>
							<option value="Liechtenstein"	data-code="417">	Liechtenstein	</option>
							<option value="Lituania"	data-code="370">	Lituania	</option>
							<option value="Luxemburgo"	data-code="352">	Luxemburgo	</option>
							<option value="Macao"	data-code="853">	Macao	</option>
							<option value="Macedonia"	data-code="389">	Macedonia	</option>
							<option value="Madagascar"	data-code="261">	Madagascar	</option>
							<option value="Malasia"	data-code="60">	Malasia	</option>
							<option value="Malawi"	data-code="265">	Malawi	</option>
							<option value="Malta"	data-code="356">	Malta	</option>
							<option value="Marruecos"	data-code="212">	Marruecos	</option>
							<option value="Mauritania"	data-code="222">	Mauritania	</option>
							<option value="México"	data-code="52">	México	</option>
							<option value="Micronesia"	data-code="691">	Micronesia	</option>
							<option value="Moldova"	data-code="373">	Moldova	</option>
							<option value="Mónaco"	data-code="377">	Mónaco	</option>
							<option value="Mongolia"	data-code="976">	Mongolia	</option>
							<option value="Montserrat"	data-code="1011">	Montserrat	</option>
							<option value="Mozambique"	data-code="258">	Mozambique	</option>
							<option value="Namibia"	data-code="264">	Namibia	</option>
							<option value="Nauru"	data-code="674">	Nauru	</option>
							<option value="Nepal"	data-code="977">	Nepal	</option>
							<option value="Nevis"	data-code="1012">	Nevis	</option>
							<option value="Nicaragua"	data-code="505">	Nicaragua	</option>
							<option value="Niger"	data-code="227">	Niger	</option>
							<option value="Nigeria"	data-code="234">	Nigeria	</option>
							<option value="Niue"	data-code="683">	Niue	</option>
							<option value="Noruega"	data-code="47">	Noruega	</option>
							<option value="Nueva Caledonia"	data-code="687">	Nueva Caledonia	</option>
							<option value="Nueva Zelanda"	data-code="64">	Nueva Zelanda	</option>
							<option value="Omán"	data-code="968">	Omán	</option>
							<option value="Pakistan"	data-code="92">	Pakistan	</option>
							<option value="Palau"	data-code="680">	Palau	</option>
							<option value="Panamá"	data-code="507">	Panamá	</option>
							<option value="Papua Nueva Guinea"	data-code="675">	Papua Nueva Guinea	</option>
							<option value="Paraguay"	data-code="595">	Paraguay	</option>
							<option value="Perú"	data-code="51">	Perú	</option>
							<option value="Polonia"	data-code="48">	Polonia	</option>
							<option value="Portugal"	data-code="351">	Portugal	</option>
							<option value="Puerto Rico"	data-code="1787">	Puerto Rico	</option>
							<option value="Qatar"	data-code="974">	Qatar	</option>
							<option value="República Central Africana"	data-code="236">	República Central Africana	</option>
							<option value="República Checa"	data-code="42">	República Checa	</option>
							<option value="República Dominicana"	data-code="1008">	República Dominicana	</option>
							<option value="República Gabona"	data-code="241">	República Gabona	</option>
							<option value="República de Mali"	data-code="223">	República de Mali	</option>
							<option value="República de Senegal"	data-code="221">	República de Senegal	</option>
							<option value="República de Vanuatú"	data-code="7377">	República de Vanuatú	</option>
							<option value="Rumanía"	data-code="40">	Rumanía	</option>
							<option value="Russia"	data-code="7">	Russia	</option>
							<option value="Rwanda"	data-code="250">	Rwanda	</option>
							<option value="Saipán"	data-code="1670">	Saipán	</option>
							<option value="Samoa Americana"	data-code="684">	Samoa Americana	</option>
							<option value="Samoa Oeste"	data-code="685">	Samoa Oeste	</option>
							<option value="San Croix, San John, San Thomas, Islas Vírgenes Americanas"	data-code="340">	San Croix, San John, San Thomas, Islas Vírgenes Americanas	</option>
							<option value="San Kitts"	data-code="1013">	San Kitts	</option>
							<option value="San Marino"	data-code="378">	San Marino	</option>
							<option value="San Vicente"	data-code="1015">	San Vicente	</option>
							<option value="Santa Elena"	data-code="290">	Santa Elena	</option>
							<option value="Santa Lucia"	data-code="1014">	Santa Lucia	</option>
							<option value="Santa Piera y Miquelón"	data-code="508">	Santa Piera y Miquelón	</option>
							<option value="Sao Tome"	data-code="239">	Sao Tome	</option>
							<option value="Sierra Leona"	data-code="232">	Sierra Leona	</option>
							<option value="Singapur"	data-code="65">	Singapur	</option>
							<option value="Siria"	data-code="963">	Siria	</option>
							<option value="Slovenia"	data-code="386">	Slovenia	</option>
							<option value="Somalía"	data-code="252">	Somalía	</option>
							<option value="Sri Lanka"	data-code="94">	Sri Lanka	</option>
							<option value="Sudáfrica"	data-code="27">	Sudáfrica	</option>
							<option value="Sudán"	data-code="249">	Sudán	</option>
							<option value="Suecia"	data-code="46">	Suecia	</option>
							<option value="Suiza"	data-code="41">	Suiza	</option>
							<option value="Surinam"	data-code="597">	Surinam	</option>
							<option value="Swazilandia"	data-code="268">	Swazilandia	</option>
							<option value="Tahití(Polinesia Francesa)"	data-code="689">	Tahití(Polinesia Francesa)	</option>
							<option value="Tailandía"	data-code="66">	Tailandía	</option>
							<option value="Taiwan"	data-code="886">	Taiwan	</option>
							<option value="Tajikstan"	data-code="73">	Tajikstan	</option>
							<option value="Tanzania"	data-code="255">	Tanzania	</option>
							<option value="Togo"	data-code="228">	Togo	</option>
							<option value="Trinidad y Tobago"	data-code="1016">	Trinidad y Tobago	</option>
							<option value="Tunisia"	data-code="216">	Tunisia	</option>
							<option value="Turquía"	data-code="90">	Turquía	</option>
							<option value="Turkmenistán"	data-code="993">	Turkmenistán	</option>
							<option value="Tuvalú"	data-code="688">	Tuvalú	</option>
							<option value="Uganda"	data-code="256">	Uganda	</option>
							<option value="Ukrania"	data-code="380">	Ukrania	</option>
							<option value="Uruguay"	data-code="598">	Uruguay	</option>
							<option value="Uzbekistán"	data-code="737">	Uzbekistán	</option>
							<option value="Vaticano"	data-code="396">	Vaticano	</option>
							<option value="Venezuela"	data-code="58">	Venezuela	</option>
							<option value="Vietnam"	data-code="84">	Vietnam	</option>
							<option value="Wallis y Futuna"	data-code="681">	Wallis y Futuna	</option>
							<option value="Yemen"	data-code="967">	Yemen	</option>
							<option value="Yugoslavia"	data-code="381">	Yugoslavia	</option>
							<option value="Zaire"	data-code="243">	Zaire	</option>
							<option value="Zambia"	data-code="260">	Zambia	</option>
							<option value="Zimbabwe"	data-code="263">	Zimbabwe	</option>-->
			</select>		
	</div>
	<br>
	<div>
		<label>
			Indicativo
			<input name="indicativo_txt" id="indicativo" size="2" readonly/>
		</label>				
	</div>
</body>
</html>

Buenos días estoy empezando a practicar con html y javascript. pero me he estancado, no consigo hacer que al elegir un país en el elemento select(para este caso pondré 3) se llene automáticamente un campo input el cual debería mostrar el indicativo de llamada internacional. los cuales debe tomar de un Array haciendo la comparación con la propiedad value del select. ya que no quiero cambiar el valor del value para no alterar los valores de la db en el campo País. Agradezco a aquella persona que me pueda informar si esto es posible y de ser así me enseñe como.

function cambioOpciones() {
		var ind_Array = [49,54,52];
		/*Aqui es donde no se como hacer la comparacion para que el imput indicativo tome los valores del array dependiendo el pais que elija el usuario*/
	document.getElementById('indicativo').value = document.getElementById('pais').value;
	/*la salida esperada seria usuario elige colombia el imput deberia tomar la posicion del array que es 52*/
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <script type="text/javascript"></script>
	<title>help</title>	
</head>
<body>	
	<div>
		<label>
			País
		</label>
			<select name="pais_txt" id="pais" onchange="cambioOpciones();"required>
				<option value="Alemania">	Alemania	</option>
				<option value="Argentina">	Argentina	</option>
				<option value="Colombia">	Colombia	</option>
			</select>		
	</div>
	<br>
	<div>
		<label>
			Indicativo
			<input name="indicativo_txt" id="indicativo" size="2" readonly/>
		</label>				
	</div>
</body>
</html>

2 respuestas 2

1

Te doy la bienvenida a Stackoverflow.

La solución que propone @phpMyGuel es muy interesante, sobre todo si tomas la información de una base de datos y construyes tus option a partir de esa información, pues podrías asignar a cada elemento un atributo data- con el código respectivo y ya lo tendrías a mano haciendo lo que Miguel explica en su respuesta. Pero te recomiendo que en vez de hacerlo todo en la parte del HTML, obtengas el valor de los atributos directamente en Javascript (ver número 1 de las recomendaciones).

Aquí te muestro otra posibilidad que consiste en tener en Javascript un objeto ordenado por clave/valor. En este caso la clave sería el nombre del país que se recupera del value del option, y se usa esa clave para obtener el valor del código dentro del objeto mCodes.

Recomendaciones

Aprovecho también para introducir el uso de algunas prácticas recomendadas en Javascript:

  1. Evitar el uso de funciones in line, colocadas en los elementos HTML. Esto hace el código más dependiente. Se recomienda usar las escuchas de eventos para asignar las funciones.
  2. Usar siempre DOMContentLoaded, que también es una escucha de un evento especial. Lo que hace es no intentar usar nada del DOM mientras éste no esté cargando. Si no se usa este listener el código puede estar sujeto a error al intentar usar o modificar un elemento sin que éste se encuentre disponible por no haber sido cargado todavía.

document.addEventListener("DOMContentLoaded", function(event) {
  /*Asignar en este bloque todo lo relativo al DOM, como escucha de eventos*/
  var selPaises = document.getElementById('pais');
  /*Aquí indicamos que cuando cambie una opción se ejecute cambioOpciones*/
  selPaises.addEventListener("change", cambioOpciones, false);

});

function cambioOpciones(e) {
  var ibxCode = document.getElementById('indicativo');
  var mPais = e.target.value;
  var mCodes = {
    Alemania: 49,
    Argentina: 54,
    Colombia: 52,
    "Pais 1": 1,
    Pais2: 2,
    Pais3: 3,
    Pais4: 4,
    Pais5: 5,
    Pais6: 6,
    Pais7: 7,
    Pais8: 8,
    Pais9: 9,
    Pais10: 10,
    Pais11: 11,
    Pais12: 12,
    Pais13: 13,
    Pais14: 14,
    Pais15: 15,
    Pais16: 16,
    Pais17: 17,
    Pais18: 18,
    Pais19: 19,
    Pais20: 20
  };
  var thisCode = mCodes[mPais] || 0;
  ibxCode.value = thisCode;
}
<div>
  <label>País</label>
  <select name="pais_txt" id="pais" required>
    <option value="" selected> --Seleccione un país-- </option>
    <option value="Alemania"> Alemania </option>
    <option value="Argentina"> Argentina </option>
    <option value="Colombia"> Colombia </option>
    <option value="Pais 1"> Pais1 </option>
    <option value="Pais2"> Pais2 </option>
    <option value="Pais3"> Pais3 </option>
    <option value="Pais4"> Pais4 </option>
    <option value="Pais5"> Pais5 </option>
    <option value="Pais6"> Pais6 </option>
    <option value="Pais7"> Pais7 </option>
    <option value="Pais8"> Pais8 </option>
    <option value="Pais9"> Pais9 </option>
    <option value="Pais10"> Pais10 </option>
    <option value="Pais11"> Pais11 </option>
    <option value="Pais12"> Pais12 </option>
    <option value="Pais13"> Pais13 </option>
    <option value="Pais14"> Pais14 </option>
    <option value="Pais15"> Pais15 </option>
    <option value="Pais16"> Pais16 </option>
    <option value="Pais17"> Pais17 </option>
    <option value="Pais18"> Pais18 </option>
    <option value="Pais19"> Pais19 </option>
    <option value="Pais20"> Pais20 </option>
  </select>
</div>
<br>
<div>
  <label>Indicativo
     <input name="indicativo_txt" id="indicativo" size="2" readonly/>
  </label>
</div>


Usando atributos de datos, mediante escucha de eventos en Javascript, el código sería así:

document.addEventListener("DOMContentLoaded", function(event) {
  /*Asignar en este bloque todo lo relativo al DOM, como escucha de eventos*/
  var selPaises = document.getElementById('pais');
  /*Aquí indicamos que cuando cambie una opción se ejecute cambioOpciones*/
  selPaises.addEventListener("change", cambioOpciones, false);

});

function cambioOpciones(e) {
  var ibxCode = document.getElementById('indicativo');
  /*Referencia al set de datos del option seleccionado*/
  var thisData = e.target.options[e.target.selectedIndex].dataset;
  ibxCode.value = thisData.code;
}
<div>
  <label>País</label>
  <select name="pais_txt" id="pais" required>
    <option value="" data-code="0" selected> --Seleccione un país-- </option>
    <option value="Alemania"  data-code="49"> Alemania </option>
    <option value="Argentina" data-code="54"> Argentina </option>
    <option value="Colombia"  data-code="52"> Colombia </option>
  </select>
</div>
<br>
<div>
  <label>Indicativo
     <input name="indicativo_txt" id="indicativo" size="2" readonly/>
  </label>
</div>

Cabe subrayar que los atributos de datos son una poderosa herramienta que permiten guardar dentro de los elementos estructuras completas de datos. Imaginemos que se necesite guardar también las coordenadas del país, o una lista de las regiones del mismo, o la cantidad del habitantes... cada información de estas se puede poner en un atributo data, bajo data-coordinates, data-population, data-regions y se accedería mediante thisData.coordinates, thisData.population, thisData.regions (por eso he creado a propósito una referencia al set de datos en el código).

10
  • Muchas gracias A. Cedano aprecio los consejos brindados, tu respuesta me deja bastante satisfecho ahora veo que me falta mucho por aprender. el 13 abr. 2019 a las 20:13
  • Hola Saludos A. Cedano, quiero comentarte que aunque me gusto más la primera solución que diste acerca de obtener atributos con Javascript no funciono sino para los 9 primeros países de la lista a partir del décimo país el elemento input(indicativo) quedaba en blanco hasta para los primeros 9 países. por lo cual no me quedo de otra que hacerlo todo en la parte del HTML con las etiquetas data. funciono para todos. Más sin embargo quisiera saber porque no soporto la lista de los 226 que tengo en javascript. cuide bastante la sintaxis y probé de varias maneras pero no funciono. el 13 abr. 2019 a las 23:38
  • @CesarMoreno si puedes pon en tu pregunta el objeto que creaste con los valores asociados y podrá hacer una prueba. Debería funcionar, pues 226 tampoco es que sea algo demasiado grande. Algún fallo debe haber en alguna parte en el código.
    – A. Cedano
    el 13 abr. 2019 a las 23:40
  • Pues veras lo deje todo igual solamente añadí los países restantes en el HTML y en el Javascript el 14 abr. 2019 a las 0:13
  • @CesarMoreno revisa el código editado, agregué más de 20 países de prueba y funciona correctamente. Como te dije, si pones en tu pregunta cómo estás construyendo la lista de países y los option podríamos ayudarte mejor.
    – A. Cedano
    el 14 abr. 2019 a las 0:25
0

function cambioOpciones(indicador) {      
  document.getElementById('indicativo').value = indicador;
}
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
  <script type="text/javascript"></script>
	<title>help</title>	
</head>
<body>	
	<div>
		<label>
			País
		</label>
			<select name="pais_txt" id="pais" onchange="cambioOpciones(this.options[this.selectedIndex].dataset.indicador);"required>
				<option value="Alemania" data-indicador="49">	Alemania	</option>
				<option value="Argentina" data-indicador="54">	Argentina	</option>
				<option value="Colombia" data-indicador="52">	Colombia	</option>
			</select>		
	</div>
	<br>
	<div>
		<label>
			Indicativo
			<input name="indicativo_txt" id="indicativo" size="2" readonly/>
		</label>				
	</div>
</body>
</html>

Te propongo una solución que se apoya en los atributos personalizados de HTML5. De esta manera puedes preservar el value que tenías en los options.

1
  • Gracias por tu ayuda amigo. Desconocía esas etiquetas data -indicador, e aprendido algo nuevo. el 13 abr. 2019 a las 20:06

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.