SoloCodigo

Programación Web y Scripting => HTML => Mensaje iniciado por: RadicalEd en Viernes 2 de Marzo de 2007, 22:14

Título: Llenar Combobox Dinámico
Publicado por: RadicalEd en Viernes 2 de Marzo de 2007, 22:14
Hola chicos de SoloCodigo, necesito arreglar un problema.

Lo que pasa es que en una aplicacion donde se pide al usuario que seleccione un dato a través de un combobox1 y según sea la opción se debe llenar un combobox2 con las sub_opciones de esa opción, algo así como cuando uno llena el País en el Hotmail y aparecen los estados de dicho País.

Me pueden dar una ayuda o un enlace con info al respecto.

Me la imagino por medio de JavaScript, pero es que soy un poquito malo para este, y pues no quiero hacerlo por php ya que me tocaria modificar una tabla con unos datos que ya existen y blablablabla.

Gracias Chao.
Título: Re: Llenar Combobox Dinámico
Publicado por: RadicalEd en Viernes 2 de Marzo de 2007, 23:27
Lo resolví así y me sirvio full, lo encontre en forosdelweb:
<!--html--></div><table border='0' align='center' width='95%' cellpadding='3' cellspacing='1'><tr><td>HTML </td></tr><tr><td id='CODE'><!--html1--><html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" src="reloj.js"></script>
<script language="JavaScript">
<!--
   function addOpt(oCntrl, iPos, sTxt, sVal){
     var selOpcion=new Option(sTxt, sVal);
     eval(oCntrl.options[iPos]=selOpcion);
   }

   function cambia(oCntrl)
   {
    while (oCntrl.length) oCntrl.remove(0);
    switch (document.form1.algo.selectedIndex)
   {
     case 0:
      addOpt(oCntrl,  0, "Clientes de Televentas", "0");
      addOpt(oCntrl,  1, "Clientes de Ejecutivos", "1");
     addOpt(oCntrl,  2, "Clientes de Oficina", "2");
     addOpt(oCntrl,  3, "Clientes Nuevos", "3");
      break;
     case 1:
      addOpt(oCntrl,  0, "Clientes de Televentas", "0");
      addOpt(oCntrl,  1, "Clientes de Ejecutivos", "1");
     addOpt(oCntrl,  2, "Clientes de Oficina", "2");
     addOpt(oCntrl,  3, "Clientes Nuevos", "3");
      break;
     case 2:
      addOpt(oCntrl,  0, "Clientes de Televentas", "0");
      addOpt(oCntrl,  1, "Clientes de Ejecutivos", "1");
     addOpt(oCntrl,  2, "Clientes de Oficina", "2");
      break;
     case 3:
      addOpt(oCntrl,  0, "Cobros", "0");
      addOpt(oCntrl,  1, "Operacion de Cartera Propios", "1");
      addOpt(oCntrl,  2, "Operacion de Cartera Pjecutivos", "2");
      addOpt(oCntrl,  3, "Operacion de Cartera Oficina", "3");
      break;
     case 4:
      addOpt(oCntrl,  0, "Clientes de Televentas", "0");
      addOpt(oCntrl,  1, "Clientes de Ejecutivos", "1");
     addOpt(oCntrl,  2, "Clientes de Oficina", "2");
      break;
     case 5:
      addOpt(oCntrl,  0, "Clientes de Televentas", "0");
      addOpt(oCntrl,  1, "Clientes de Ejecutivos", "1");
     addOpt(oCntrl,  2, "Clientes de Oficina", "2");
      break;
     case 6:
      addOpt(oCntrl,  0, "Clientes de Televentas", "0");
      addOpt(oCntrl,  1, "Clientes de Ejecutivos", "1");
     addOpt(oCntrl,  2, "Clientes de Oficina", "2");
      break;
     case 7:
      addOpt(oCntrl,  0, "Baño", "0");
      addOpt(oCntrl,  1, "Almuerzo", "1");
     addOpt(oCntrl,  2, "Entredía", "2");
      addOpt(oCntrl,  3, "Llamadas personales", "3");
     addOpt(oCntrl,  4, "Diligencia personal", "4");
      break;
     case 8:
      addOpt(oCntrl,  0, "Adecuación puesto de trabajo", "0");
      addOpt(oCntrl,  1, "Elaboración de informes", "1");
     addOpt(oCntrl,  2, "Presentación de informes", "2");
      addOpt(oCntrl,  3, "Reuniones", "3");
      break;
     case 6:
      addOpt(oCntrl,  0, "En la Oficina", "0");
      addOpt(oCntrl,  1, "Fuera de la Oficina", "1");
     addOpt(oCntrl,  2, "Clientes de Oficina", "2");
      break;
    }
   }
//-->
</script>
</head>
<body>
<br><br><br><br><br><br><br>
<center>
<form name="form1" method="get" action="grabar.php">
    <SELECT NAME='algo' onChange="cambia(document.form1.opcion)">
      <OPTION VALUE=1>Cotizaciones
      <OPTION VALUE=2>Información Técnica
      <OPTION VALUE=3>Información Sobre Pedidos
      <OPTION VALUE=4>Cartera
      <OPTION VALUE=5>Logística
      <OPTION VALUE=6>Compras
      <OPTION VALUE=7>Pedidos
      <OPTION VALUE=8>Personales
      <OPTION VALUE=9>Labores Operativas
      <OPTION VALUE=10>Atención Personal a Clientes
    </SELECT>
    <select name="opcion">
      <option selected>Clientes de Televentas</option>
      <option>Clientes Ejecutivos</option>
      <option>Clientes de Oficina</option>
    </select>
    <br><br>
    <SELECT NAME='nombre'>
      <OPTION VALUE='Mayerli'>Mayerly
      <OPTION VALUE='Alex'>Alex
    </SELECT>
    <input type=hidden name="horas" size="8" value="<?php echo $hora; ?>">   
    <input type=hidden name="fechas" size="8" value="<?php echo $fecha; ?>">   
   <br><br>
    <input type="submit" name="Submit" value="Fin">
</form></center>
</body>
</html><!--html2--></td></tr></table><div class='postcolor'><!--html3-->
Título: Re: Llenar Combobox Dinámico
Publicado por: Mollense en Sábado 3 de Marzo de 2007, 00:33
Gracias viejo, está muy buena la function!!!  :beer:
Título: Re: Llenar Combobox Dinámico
Publicado por: Bicholey en Sábado 3 de Marzo de 2007, 04:50
:lol:  :lol:  :lol:  :lol:


Perfecto hoy me habia metido al foro para preguntar algo similar y ohh mi god la respuesta sin ni siquiera preguntarla.
Título: Re: Llenar Combobox Dinámico
Publicado por: LeGatoRojo en Miércoles 7 de Marzo de 2007, 00:09
Código: Text
  1. &#60;select name=&#34;pais_l&#34; onchange=&#34;makeRequest('comboEstado','../inc/arrest.php?pa='+this.value);&#34;&#62;
  2.  
  3. function makeRequest(campo,url){
  4.       http_request = false;      
  5.       if(window.XMLHttpRequest){ // mozilla, netscape, opera...
  6.         http_request = new XMLHttpRequest();
  7.         if(http_request.overrideMimeType){
  8.           http_request.overrideMimeType('text/xml');
  9.         }
  10.       }else if(window.ActiveXObject){ // IE
  11.         try{
  12.           http_request = new ActiveXObject(&#34;Msxml2.XMLHTTP&#34;);
  13.         }catch(e){
  14.           try{
  15.             http_request = new ActiveXObject(&#34;Microsoft.XMLHTTP&#34;);
  16.           }catch(e){
  17.           }
  18.         }
  19.       }
  20.       if(!http_request){
  21.         alert('Falla :( No es posible crear una instancia XMLHTTP');
  22.         return false;
  23.       }
  24.       if(campo == 'comboEstado')
  25.         http_request.onreadystatechange = comboEstado;
  26.       if(campo == 'comboEstado1')
  27.         http_request.onreadystatechange = comboEstado1;  
  28.       http_request.open('GET', url, true);
  29.       http_request.send(null);
  30.     }
  31.    
  32.     function comboEstado(){
  33.       if(http_request.readyState == 4){
  34.         if(http_request.status == 200){
  35.           var opciones=http_request.responseText.split('|');
  36.           document.forms.form1.estado_l.options.length=0;
  37.           for(var i=0; i&#60;opciones.length; i++){
  38.             var par=opciones[i].split('#');
  39.             document.forms.form1.estado_l.options[i]=new Option(par[1],par[0]);
  40.           }
  41.           document.forms.form1.estado_l.options.length--;
  42.         }else{
  43.           alert('Hubo problemas con la petición.');
  44.         }
  45.       }
  46.     }
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  




Yo ocupo esto, claro tambien ocupo algo de php y una bd