estadosmunicipios.js
Código:
var estados_arr = new Array("Aguascalientes","Baja California"); var s_a = new Array(); s_a[0]=""; s_a[1]="Aguascalientes|Asientos|Calvillo|Cosío|Jesús maria|Pabellón de arteaga|Rincón de romos|San josé de gracia|Tepezalá|San francisco de los romo|El llano"; s_a[2]="Ensenada|Mexicali|Tecate|Tijuana|Playas de rosarito|Rosarito|Ciudad guadalupe victoria|San felipe|San quintín|Ciudad morelos|Los algodones|La rumorosa|Cataviña|Colonet|Cedros|Guadalupe|Islas coronado"; s_a[3]="Comondú|Mulegé|La paz|Los cabos|Loreto"; function print_country(country_id){ // given the id of the <select> tag as function argument, it inserts <option> tags var option_str = document.getElementById(country_id); option_str.length=0; option_str.options[0] = new Option('Seleccione Estado',''); option_str.selectedIndex = 0; for (var i=0; i<estados_arr.length; i++) { option_str.options[option_str.length] = new Option(estados_arr[i],estados_arr[i]); } } function print_state(state_id, state_index){ var option_str = document.getElementById(state_id); option_str.length=0; // Fixed by Julian Woods option_str.options[0] = new Option('Seleccione Poblacion',''); option_str.selectedIndex = 0; var state_arr = s_a[state_index].split("|"); for (var i=0; i<state_arr.length; i++) { option_str.options[option_str.length] = new Option(state_arr[i],state_arr[i]); } }
Codigo html
Código:
<title>Estados y Poblaciones</title> <style type="text/css"> .main{ margin:0 auto; border:0px green dashed; min-height:200px; width:550px; margin-top:150px; padding-left:55px; } #country { width:250px; height:25px; font-size:14px; font-family:Verdana, Geneva, sans-serif; } #state { width:250px; height:25px; font-size:14px; font-family:Verdana, Geneva, sans-serif; } #size { width:230px; margin-top:50px; } </style> </head> <body> <script type="text/javascript" src="countries.js"></script> <div class="main"> <select onchange="print_state('state',this.selectedIndex);" id="country" name ="country"></select> <br /> <select name ="state" id ="state" ></select> <script language="javascript">print_country("country");</script> </div> </body>