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>