espacio en blanco en Combos

vissiontotal · #1 (**permalink**) 26/08/2008, 18:06

Hola a los expertos de seguro me podras ayudar....
logre hacer que funcione un combo dependiente.... ahora mi problemas es que cuando se llena el segundo Select... al inicio de la lista hay un espacio en blanco... quisiera que no saliera ese espacio para que se pueda ver la lista desde el incio

Aqui les dejo mi codigo.....

<script language="JavaScript">
function cambiar()
{
var index=document.forms.clasificados.categoria.select edIndex;
document.clasificados.subcategoria.length=1;

if(index==1) asesorias();
if(index==2) autos();

}

function asesorias(){
opcion1=new Option("ASESORÍA AVALUOS","ASESORÍA AVALUOS","defauldSelected");
opcion2=new Option("ASESORÍA INMOBILIARIA","ASESORÍA INMOBILIARIA");
opcion3=new Option("ASESORÍA FINANCIERA","ASESORÍA FINANCIERA");
opcion4=new Option("ASESORÍA FISCAL","ASESORÍA FISCAL");
opcion5=new Option("ASESORÍA LEGAL","ASESORÍA LEGAL");

document.forms.clasificados.subcategoria.options[1]=opcion1;
document.forms.clasificados.subcategoria.options[2]=opcion2;
document.forms.clasificados.subcategoria.options[3]=opcion3;
document.forms.clasificados.subcategoria.options[4]=opcion4;
document.forms.clasificados.subcategoria.options[5]=opcion5;
}

function autos(){
opcion1=new Option("Ford","Ford","defauldSelected");
opcion2=new Option("Chevrolet","Chevrolet");
opcion3=new Option("Nissan","Nissan");

document.forms.clasificados.subcategoria.options[1]=opcion1;
document.forms.clasificados.subcategoria.options[2]=opcion2;
document.forms.clasificados.subcategoria.options[3]=opcion3;
}

</script>

<body>
<form id="clasificados" name="clasificados" method="post" action="">
<table width="372" border="0">
<tr>
<td width="129" class="textos_standar_blanco">Categoria</td>
<td width="233" class="textos_standar_blanco"><label>
<select name="categoria" id="categoria" onchange="cambiar()">
<option selected="selected">SELECCIONAR</option>
<option value="Asesorías">Asesorías</option>
<option value="Autos">Autos</option>
</select>
</label></td>
</tr>
<tr>
<td class="textos_standar_blanco">Subcategoría</td>
<td class="textos_standar_blanco"><select name="subcategoria" id="subcategoria" >
</select></td>
</tr>
</table>
<p>
<label>
<input type="submit" name="button" id="button" value="Enviar" />
</label>
</p>
</form>

Panino5001 · #2 (**permalink**) 26/08/2008, 23:01

Simplemente en ambos casos iniciá con índice cero las opciones. Ejemplo:

Código PHP:

  document.forms.clasificados.subcategoria.options[0]=opcion1;//[0] en vez de [1]
document.forms.clasificados.subcategoria.options[1]=opcion2;//[1] en vez de [2]
document.forms.clasificados.subcategoria.options[2]=opcion3;
document.forms.clasificados.subcategoria.options[3]=opcion4;
document.forms.clasificados.subcategoria.options[4]=opcion5;

vissiontotal · #3 (**permalink**) 27/08/2008, 12:13

Muchas gracias Panino5001 fuiste la solucion a mi dolor de cabeza...
ya queedo sólucionado y funcionando perfecto..........

abusando de tus conociemientos o alguien que sepa..........

cómo le puedo hacer para que el Select dependiente del primero no se muestre hasta que se seleccione una opción en el primero........

de antemano muchas gracias............

Panino5001 · #4 (**permalink**) 27/08/2008, 12:28

Probá así:

Código PHP:

  <script language="JavaScript"> 
function cambiar() 
{ 
var index=document.forms.clasificados.categoria.selectedIndex; 
document.clasificados.subcategoria.length=1; 
if(index==0)document.getElementById('subcategoria').style.display='none';else document.getElementById('subcategoria').style.display='block'; 
if(index==1) asesorias(); 
if(index==2) autos(); 
 
} 
 
 
function asesorias(){ 
opcion1=new Option("ASESORÍA AVALUOS","ASESORÍA AVALUOS","defauldSelected"); 
opcion2=new Option("ASESORÍA INMOBILIARIA","ASESORÍA INMOBILIARIA"); 
opcion3=new Option("ASESORÍA FINANCIERA","ASESORÍA FINANCIERA"); 
opcion4=new Option("ASESORÍA FISCAL","ASESORÍA FISCAL"); 
opcion5=new Option("ASESORÍA LEGAL","ASESORÍA LEGAL"); 
 
document.forms.clasificados.subcategoria.options[0]=opcion1; 
document.forms.clasificados.subcategoria.options[1]=opcion2; 
document.forms.clasificados.subcategoria.options[2]=opcion3; 
document.forms.clasificados.subcategoria.options[3]=opcion4; 
document.forms.clasificados.subcategoria.options[4]=opcion5; 
} 
 
function autos(){ 
opcion1=new Option("Ford","Ford","defauldSelected"); 
opcion2=new Option("Chevrolet","Chevrolet"); 
opcion3=new Option("Nissan","Nissan"); 
 
document.forms.clasificados.subcategoria.options[0]=opcion1; 
document.forms.clasificados.subcategoria.options[1]=opcion2; 
document.forms.clasificados.subcategoria.options[2]=opcion3; 
} 
 
 
</script> 
 
 
<body> 
<form id="clasificados" name="clasificados" method="post" action=""> 
<table width="372" border="0"> 
<tr> 
<td width="129" class="textos_standar_blanco">Categoria</td> 
<td width="233" class="textos_standar_blanco"><label> 
<select name="categoria" id="categoria" onchange="cambiar()"> 
<option selected="selected">SELECCIONAR</option> 
<option value="Asesorías">Asesorías</option> 
<option value="Autos">Autos</option> 
</select> 
</label></td> 
</tr> 
<tr> 
<td class="textos_standar_blanco">Subcategoría</td> 
<td class="textos_standar_blanco"><select name="subcategoria" id="subcategoria" style="display:none"> 
</select></td> 
</tr> 
</table> 
<p> 
<label> 
<input type="submit" name="button" id="button" value="Enviar" /> 
</label> 
</p> 
</form> 
</body> 
</html>

vissiontotal · #5 (**permalink**) 28/08/2008, 00:30

Perfecto muchas gracias funciona al 100 %........

sólo que para que la subcategoria desaparezca hay que seleccionar primero una categoria y luego no seleccionar nada en categoria para que pueda hacer la funcion de desaparecer la segunda en el On Change

se podrá hacer que no se vea la subcategoria desde que entra a la pagina ?...
y que se muestre cuando se seleccione una categoria...............

gracias, muchasgracias por compartir tus conocimientos con los demas Panino5001

ojalá y todo esto les sirva a alguien mas............

Panino5001 · #6 (**permalink**) 28/08/2008, 00:43

En realidad, en el código que puse pasa eso exactamente. Posiblemente te hayas olvidado de copiar bien esta parte:

Código PHP:

  <select name="subcategoria" id="subcategoria" style="display:none"> 
</select>

El style="display:none" hace que de entrada no se vea ;)

Panino5001 · #7 (**permalink**) 28/08/2008, 00:48

Aunque si te referís también a la palabra, podrías usar esto:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>test</title> 
<script language="JavaScript"> 
function cambiar() 
{ 
var index=document.forms.clasificados.categoria.selectedIndex; 
document.clasificados.subcategoria.length=1; 
if(index==0)document.getElementById('esta').style.visibility='hidden';else document.getElementById('esta').style.visibility='visible'; 
if(index==1) asesorias(); 
if(index==2) autos(); 
 
} 
 
 
function asesorias(){ 
opcion1=new Option("ASESORÍA AVALUOS","ASESORÍA AVALUOS","defauldSelected"); 
opcion2=new Option("ASESORÍA INMOBILIARIA","ASESORÍA INMOBILIARIA"); 
opcion3=new Option("ASESORÍA FINANCIERA","ASESORÍA FINANCIERA"); 
opcion4=new Option("ASESORÍA FISCAL","ASESORÍA FISCAL"); 
opcion5=new Option("ASESORÍA LEGAL","ASESORÍA LEGAL"); 
 
document.forms.clasificados.subcategoria.options[0]=opcion1; 
document.forms.clasificados.subcategoria.options[1]=opcion2; 
document.forms.clasificados.subcategoria.options[2]=opcion3; 
document.forms.clasificados.subcategoria.options[3]=opcion4; 
document.forms.clasificados.subcategoria.options[4]=opcion5; 
} 
 
function autos(){ 
opcion1=new Option("Ford","Ford","defauldSelected"); 
opcion2=new Option("Chevrolet","Chevrolet"); 
opcion3=new Option("Nissan","Nissan"); 
 
document.forms.clasificados.subcategoria.options[0]=opcion1; 
document.forms.clasificados.subcategoria.options[1]=opcion2; 
document.forms.clasificados.subcategoria.options[2]=opcion3; 
} 
 
 
</script> 
 
 
<body> 
<form id="clasificados" name="clasificados" method="post" action=""> 
<table width="372" border="0"> 
<tr> 
<td width="129" class="textos_standar_blanco">Categoria</td> 
<td width="233" class="textos_standar_blanco"><label> 
<select name="categoria" id="categoria" onchange="cambiar()"> 
<option selected="selected">SELECCIONAR</option> 
<option value="Asesorías">Asesorías</option> 
<option value="Autos">Autos</option> 
</select> 
</label></td> 
</tr> 
<tr id="esta" style="visibility:hidden"> 
<td class="textos_standar_blanco">Subcategoría</td> 
<td class="textos_standar_blanco"><select name="subcategoria" id="subcategoria"> 
</select></td> 
</tr> 
</table> 
<p> 
<label> 
<input type="submit" name="button" id="button" value="Enviar" /> 
</label> 
</p> 
</form> 
</body> 
</html>

vissiontotal · #8 (**permalink**) 29/08/2008, 00:13

Asi era Panino5001 no sabes como te lo agradezco........
era de la segunda forma. para lograr el efecto que queria..........
me esta quedando muy bien y se esta viendo muy profesional.........

muchas gracias.............