Modificar ancho de select dinamico

Gustavo1973 · #1 (**permalink**) 27/12/2010, 20:09

Tengo una select que hasta que el cliente no cargue los datos no se que ancho tendrá. A la derecha del select tengo otros select que se hacen visibles según la seleccion del primero, pero como hago para que se mantenga pegado el segundo al primero???
Se entiende???
tengo el siguiente codigo

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD html 4.0 Transitional//EN"> 
<html> 
<head> 
<SCRIPT LANGUAGE="JavaScript">  
ie4 = (document.all)? true:false  
</SCRIPT> 
<script language="JavaScript"> 
<!-- 
 
function MostrarCapa(name,capa){ 
OcultarCapa('Buenos Aires'); 
OcultarCapa('Cordoba'); 
OcultarCapa('Santa Fe'); 
document.all(capa).style.position = 'absolute'; 
document.all(capa).style.left = "150"; //Ancho del primer select!!! 
document.all(capa).style.visibility='visible'; 
document.all(capa).disabled = false; 
} 
function OcultarCapa(capa){ 
document.all(capa).style.visibility='hidden'; 
document.all(capa).disabled = true; 
} 
--> 
</script> 
</head> 
<body> 
<input type="text" name="sdfsd"> 
<form method="POST" action="prueba.php"> 
<select id="prueba"name="prueba"onchange="MostrarCapa(name,value);"> 
    <option value="Buenos Aires">Buenos Aires</option> 
    <option value="Cordoba">Cordoba</option> 
    <option value="Santa Fe">Santa Fe</option> 
</select> 
<select name="ciudad"id="Buenos Aires"style="visibility:visible"> 
    <option>ZO</option> 
    <option>ZN</option> 
    <option>ZS</option> 
</select> 
<select name="ciudad"id="Cordoba"style="visibility:hidden"> 
    <option>Capital</option> 
    <option>V. Carlos Paz</option> 
</select> 
<select name="ciudad"id="Santa Fe"style="visibility:hidden"> 
    <option>Capital</option> 
    <option>Rosario</option> 
</select> 
<br> 
<input type="submit"> 
</form> 
</body> 
</html>

Quiero que la posición varíe según el ancho del select Prueba!!!

Muchas Gracias

maycolalvarez · #2 (**permalink**) 27/12/2010, 22:35

document.all no funciona en vario navegadores, lo mejor es utilizar document.getElementById o document.forms['name_form'].elements['name_input']

con respecto a tu problema, debes de especificar la unidad de media al asignar el ancho del select, por ejemplo:

document.getElementById(capa).style.left = "150px"; //Ancho del primer select!!!
NOTA: algunos navegadores omiten ese ancho y no se puede manipular

además no se deben de usar espacios en blanco para el id de los tags, remplazarlos por un guión bajo, y separa los atributos con al menos un espacio de por medio:

<select name="ciudad" id="Santa_Fe" style="visibility:hidden;">

Gustavo1973 · #3 (**permalink**) 28/12/2010, 11:40

Gracias, lo voy a probar!!!