Programación Web y Scripting > PHP
Select Dependientes
(1/1)
neorent:
Estimados Todos:
bueno hace tiempo que vengo ocupando ajax, para hacer select dependientes de nivel y me ha funcionado super bien, el tema es que ahora me ha presentado algo que no se como solucionar y ver si alguno de ustedes me puede ayudar.
el tema es el siguiente, nevegando con internet explorer, me despliega el select generado por ajax, el tema es que no le puedo dar un ancho fijo y si lo que estoy consultando es demasiado largo no me funciona bien, ahora en mozilla resulta bien les dejo dos imagenes para que vean a lo que me refiero.
Aqui con Internet Explorer
Aqui con Mozilla
el tema es que no se como solucionarlo, le voy a dejar todos los codigos que se ocupan a ver si ustedes encuentran algo y me lo pueden indicar.
si desean saber de donde saque este codigo les dejo el link.
http://www.formatoweb.com.ar/ajax/select_dependientes.php
Conexion.php
--- Código: Text ---<?phpfunction conectar(){ mysql_connect("localhost", "root", ""); mysql_select_db("ajax");} function desconectar(){ mysql_close();}?>
Select_dependiente.php
--- Código: Text ---<?phpfunction generaPaises(){ include 'conexion.php'; conectar(); $consulta=mysql_query("SELECT id, opcion FROM lista_paises"); desconectar(); // Voy imprimiendo el primer select compuesto por los paises echo "<select name='paises' id='paises' onChange='cargaContenido(this.id)'>"; echo "<option value='0'>Elige</option>"; while($registro=mysql_fetch_row($consulta)) { echo "<option value='".$registro[0]."'>".$registro[1]."</option>"; } echo "</select>";}?> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="es"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><title>AJAX, Ejemplos: Combos (select) dependientes, codigo fuente - ejemplo</title><link rel="stylesheet" type="text/css" href="select_dependientes.css"><script type="text/javascript" src="select_dependientes.js"></script></head> <body> <div id="demo" style="width:600px;"> <div id="demoDer"> <select disabled="disabled" name="estados" id="estados"> <option value="0">Selecciona opción...</option> </select> </div> <div id="demoIzq"><?php generaPaises(); ?></div> </div> </body></html>
Select_dependiente_proceso.php
--- Código: Text ---<?php// Array que vincula los IDs de los selects declarados en el HTML con el nombre de la tabla donde se encuentra su contenido$listadoSelects=array("paises"=>"lista_paises","estados"=>"lista_estados"); function validaSelect($selectDestino){ // Se valida que el select enviado via GET exista global $listadoSelects; if(isset($listadoSelects[$selectDestino])) return true; else return false;} function validaOpcion($opcionSeleccionada){ // Se valida que la opcion seleccionada por el usuario en el select tenga un valor numerico if(is_numeric($opcionSeleccionada)) return true; else return false;} $selectDestino=$_GET["select"]; $opcionSeleccionada=$_GET["opcion"]; if(validaSelect($selectDestino) && validaOpcion($opcionSeleccionada)){ $tabla=$listadoSelects[$selectDestino]; include 'conexion.php'; conectar(); $consulta=mysql_query("SELECT id, opcion FROM $tabla WHERE relacion='$opcionSeleccionada'") or die(mysql_error()); desconectar(); // Comienzo a imprimir el select echo "<select name='".$selectDestino."' id='".$selectDestino."' onChange='cargaContenido(this.id)'>"; echo "<option value='0'>Elige</option>"; while($registro=mysql_fetch_row($consulta)) { // Convierto los caracteres conflictivos a sus entidades HTML correspondientes para su correcta visualizacion $registro[1]=htmlentities($registro[1]); // Imprimo las opciones del select echo "<option value='".$registro[0]."'>".$registro[1]."</option>"; } echo "</select>";}?>
y el javascript que lo genera.
Select_Dependiente.js
--- Código: Text ---function nuevoAjax(){ /* Crea el objeto AJAX. Esta funcion es generica para cualquier utilidad de este tipo, por lo que se puede copiar tal como esta aqui */ var xmlhttp=false; try { // Creacion del objeto AJAX para navegadores no IE xmlhttp=new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { try { // Creacion del objet AJAX para IE xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } catch(E) { if (!xmlhttp && typeof XMLHttpRequest!='undefined') xmlhttp=new XMLHttpRequest(); } } return xmlhttp; } // Declaro los selects que componen el documento HTML. Su atributo ID debe figurar aqui.var listadoSelects=new Array();listadoSelects[0]="paises";listadoSelects[1]="estados"; function buscarEnArray(array, dato){ // Retorna el indice de la posicion donde se encuentra el elemento en el array o null si no se encuentra var x=0; while(array[x]) { if(array[x]==dato) return x; x++; } return null;} function cargaContenido(idSelectOrigen){ // Obtengo la posicion que ocupa el select que debe ser cargado en el array declarado mas arriba var posicionSelectDestino=buscarEnArray(listadoSelects, idSelectOrigen)+1; // Obtengo el select que el usuario modifico var selectOrigen=document.getElementById(idSelectOrigen); // Obtengo la opcion que el usuario selecciono var opcionSeleccionada=selectOrigen.options[selectOrigen.selectedIndex].value; // Si el usuario eligio la opcion "Elige", no voy al servidor y pongo los selects siguientes en estado "Selecciona opcion..." if(opcionSeleccionada==0) { var x=posicionSelectDestino, selectActual=null; // Busco todos los selects siguientes al que inicio el evento onChange y les cambio el estado y deshabilito while(listadoSelects[x]) { selectActual=document.getElementById(listadoSelects[x]); selectActual.length=0; var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Selecciona Opción..."; selectActual.appendChild(nuevaOpcion); selectActual.disabled=true; x++; } } // Compruebo que el select modificado no sea el ultimo de la cadena else if(idSelectOrigen!=listadoSelects[listadoSelects.length-1]) { // Obtengo el elemento del select que debo cargar var idSelectDestino=listadoSelects[posicionSelectDestino]; var selectDestino=document.getElementById(idSelectDestino); // Creo el nuevo objeto AJAX y envio al servidor el ID del select a cargar y la opcion seleccionada del select origen var ajax=nuevoAjax(); ajax.open("GET", "select_dependientes_proceso.php?select="+idSelectDestino+"&opcion="+opcionSeleccionada, true); ajax.onreadystatechange=function() { if (ajax.readyState==1) { // Mientras carga elimino la opcion "Selecciona Opcion..." y pongo una que dice "Cargando..." selectDestino.length=0; var nuevaOpcion=document.createElement("option"); nuevaOpcion.value=0; nuevaOpcion.innerHTML="Cargando..."; selectDestino.appendChild(nuevaOpcion); selectDestino.disabled=true; } if (ajax.readyState==4) { selectDestino.parentNode.innerHTML=ajax.responseText; } } ajax.send(null); }}
ojala que me puedan ayudar,
saludos a todos y gracias desde ya por leer este post,
Neo.
F_Tanori:
Hola, para hacer ,mas ancho un select puedes usar los siguiente
a ver si esto te sirve
--- Código: Text ---<select name="select1" style="width:300px">...
o con class
--- Código: CSS ---.Ancho { width:300px;}
--- Código: Text ---<select name="select1" class='Ancho'>...
Saludos
neorent:
muchas gracias funciono a la perfeccion!!!,
saludos,
Neo.
agpucci:
Hola... yo estoy con este codigo tambien, y le queria hacer una modificacion pero no me funciona.
quiero que la pirmera lista, en ves de ser listas sean radio button, se puede eso??
Muchas gracias
Navegación
Ir a la versión completa