Disponible en descarga gratuita Cuadernos de Viaje - Oriente Próximo, el libro con nuestras aventuras en Jordania, Siria e Israel.

jueves, 25 de octubre de 2007

Desplegables dinámicos

Cuando se plantea la necesidad de hacer un desplegable dinámico (select en html) existen varias aproximaciones:
- Cambiar el estilo de las opciones que no se puedan seleccionar.
- Deshabilitar las opciones que no se puedan seleccionar, sin borrarlas
- Recargar por completo el desplegable incluyendo sólo las opciones válidas

Cambiar el estilo
Se puede modificar el estilo de una opción de un desplegable accediendo a sus atributos. Siendo opt el objeto option del desplegable se pueden hacer cosas como esta, desde javascript para modificar su color:
opt.style.c olor="red";

Deshabilitar la opción
Esta aproximación sólo es válida para Firefox, a pesar de que según el estándar HTML un objeto option acepta la propiedad disabled. Desde javascript:
opt.disabled="true";

Recargar el desplegable
Para eliminar las opciones de un desplegable desde javascript utilizamos este código, comboBox es el objeto select del formulario HTML.

function _removeOptions(comboBox)
{
for(var contador = comboBox.length - 1; contador > 0; contador--)
{
comboBox.remove(contador);
}
}





Para añadir opciones.




function _insertOption(comboBox, optionText, optionValue)
{
var elOptNew = document.createElement('option');
elOptNew.text = optionText;
elOptNew.value = optionValue;
try
{
comboBox.add(elOptNew, null); // Modo estándar, que no funciona en IE
}
catch(ex)
{
comboBox.add(elOptNew); // Sólo IE
}
}




Ahora bien, ¿cómo saber qué opciones hay que poner en el segundo desplegable una vez se ha modificado el primero? También con javascript. Creamos un array en javascript que contendrá las posibles etiquetas y valores del segundo combo, así como una correspondencia entre los índices del primer combo y los valores válidos del segundo.




var arValue1 = new Array ( 'valor1', 'valor2',
'valor3', 'valor4', 'valor5' );
var arValue2 = new Array ( 'valor1.1', 'valor1.2',
'valor2.1', 'valor3.1', 'valor3.2', 'valor3.3',
'valor3.4', 'valor4.1', 'valor4.2' );
var arLabel1 = new Array ( 'texto1', 'texto2',
'texto3', 'texto4', 'texto5' );
var arLabel2 = new Array ( 'texto1.1', 'texto1.2',
'texto2.1', 'texto3.1', 'texto3.2', 'texto3.3',
'texto3.4', 'texto4.1', 'texto4.2' );




El array de dependencias tendrá el índice del primer select y el del segundo válido, empezando por cero.




var arDependencias = new Array ( '0.0', '0.1', '1.2',
'2.3', '2.3', '2.4', '3.5', '3.6', '4.7', '4.8' );





Para determinar qué opciones son válidas dado un índice seleccionado, creamos un array con valor sólo en los índices válidos:




function _getValidos(indiceSeleccionado, arValidos)
{
for (var contador = 0; contador < arValue2.length - 1; contador++) {
var dependencia = arDependencias[contador].split(".");
var indice1 = new Number(indexis[0]);
var indice2 = new Number(indexis[1]);
// Esto es porque la primera opción del select es vacía
indice1 += 1;
indice2 += 1;

if( indiceSeleccionado == indice1 )
{
arValidos[indice2] = new String("");
}
}
}





La función que modificará finalmente el combo será:




function _onchangeSelect(comboBox1, comboBox2)
{
var arValidos = new Array();

var indiceSeleccionado = comboBox1.selectedIndex;

// Vaciado
this._removeOptions( comboBox2 );

this.getValidos(indiceSeleccionado, arValidos);

// Llenado
for(var contador = 0; contador < this.arPosibles.length+1; contador++) {
var esValido = arValidos[contador] != null;
if ( esValido )
{
this._insertOption(comboBox2, this.arLabel2[contador-1],
this.arValue2[contador-1]);
}
}
comboBox2.selectedIndex = 0;
}





Para cargar el primer combo:




function _resetComboBox1(comboBox1)
{
comboBox1.length = 1;
comboBox1.options[0] = new Option(selectValueName, "", true);
for (var contador = 0; contador < arValue1.length; contador++)
{
comboBox1.options[contador+1] = new Option(arLabel1[contador], arValue1[contador]);
}
}





Juntando todo en un HTML como




<html>
<head>
<script>
// Todo el javascript
</script>

</head>
<body>
<form name="pruebaDesplegable" action="">
<select name="uno" id="uno" onchange="javascript:_onchangeSelect( this, 'dos');">
<option value="">Elija</option>
</select>
<select name="dos" id="dos">
<option value="">Elija</option>
</select>
<script>
_resetComboBox1( document.getElementById( "uno" ), "Elija");
</script>
</body>
</html>

9 comentarios:

Victor dijo...

si funciona esa code jeje me ayudo muxo gracias..Peru

xumeiqing dijo...

20160524meiqing
nike air max shoes
hollister co
adidas superstar
louis vuitton outlet online
michael kors outlet
armani watches
reebok uk
coach factory outlet
tiffany jewelry
coach outlet
nike air max
ed hardy outlet
ray ban outlet
oakley sunglasses
supra for sale
mizuno running shoes
michael kors outlet
oakley sunglasses
burberry uk
kate spade outlet
cheap jordans
hermes uk
ralph lauren outlet
timberland outlet
christian louboutin outlet
ray ban outlet
air force 1
ghd hair straighteners
cartier watches
kate spade
north face jackets
polo ralph lauren
the north face
pandora charms
pandora jewelry
cheap oakley sunglasses
burberry outlet
polo outlet

Gege Dai dijo...

camisetas futbol baratas
jordan shoes 2015
michael kors outlet uk
coach outlet clearance
hermes outlet
ralph lauren pas cher
ray ban sunglasses sale
air max 90
nba jerseys
babyliss flat iron
nike uk store
new balance outlet
vans outlet
beats headphones
nike air max uk
michael kors outlet online
michael kors factory outlet
ferragamo shoes
vans shoes
christian louboutin shoes
louis vuitton handbags outlet
beats headphones
coach outlet online
ray ban sunglasses
true religion jeans
nike free 5
iphone case
coach outlet
true religion outlet
burberry outlet
ray ban sunglasses
air max 2015
nike soccer shoes
salomon shoes sale
nfl jerseys
chanyuan0718

xjd7410@gmail.com dijo...

nike store
coach factory outlet online
oakley outlet
toms shoes
giuseppe zanotti
coach outlet store online clearances
gucci outlet
insanity workout
louis vuitton purses
juicy couture
gucci outlet online
nike air max 90
kobe 11
tory burch outlet online
coach factory outlet online
cheap louis vuitton handbags
christian louboutin shoes
adidas outlet store
air max 90
michael kors outlet
rolex watches
christian louboutin outlet
michael kors outlet
ralph lauren
louis vuitton outlet stores
coach factory outlet
fit flops
cheap toms
polo ralph lauren
chenyingying2016723

John dijo...

true religion jeans outlet
canada goose jackets
uggs australia
michael kors purses
oncler outlet online
ugg sale 2016
designer handbags outlet
louis vuitton outlet
ghd flat iron
nike air max
tory burch outlet store
ugg boots on sale
ugg boots canada
ugg boots sale
pandora jewelry
michael kors handbags clearance
louis vuitton handbags
christian louboutin uk
fitflops sale
ugg boots outlet
reebok uk
longchamp outlet store
burberry outlet online
adidas nmd white
louboutin pas cher
oakley sunglasses wholesale
cheap ray ban sunglasses
polo ralph lauren outlet online
kate spade bags
moncler uk
canada goose sale
longchamp handbags
adidas nmd
michael kors purses
timberland shoes
nfl jerseys wholesale
ugg pas cher
coach factory outlet online
2016826yuanyuan

mmjiaxin dijo...

tiffany and co outlet
nike air huarache
ralph lauren uk
kobe shoes,kobe zoom,nike zoom kobe
coach outlet online
christian louboutin outlet
yeezy boost 350
http://www.raybanglasses.in.net
skechers outlet
chrome hearts
cheap jordans
nike air zoom
oakley outlet online
skechers shoes
michael kors handbags clearance
adidas stan smith shoes
tiffany and co outlet online
cheap true religion jeans
ray ban sunglasses
nike huarache
cheap mlb jerseys
http://www.yeezyboost350.uk
lacoste outlet
adidas tubular
oakley sunglasses,oakley outlet sunglasses
roshe run
michael kors handbags
nike air zoom
jordan shoes
chrome hearts online store
michael kors handbags
michael jordan shoes
adidas stan smith sneakers
nike air max thea
oakley sunglasses
gg

Unknown dijo...

cheap oakley sunglasses have
cheap nfl jerseys wholesale sheet
hugo boss sale for
cheap nike shoes sale movie
michael kors outlet share
michael kors uk show
instyler max teacher
vikings jerseys products
colts jerseys this
yeezy boost 350 black would

raybanoutlet001 dijo...

nike roshe run
michael kors handbags outlet
yeezy boost 350
oakley sunglasses wholesale
cheap jordan shoes
adidas nmd
ralph lauren outlet
ugg boots
pandora outlet
oakley sunglasses

LCc 03 dijo...

asics shoes
yeezy boost 350 v2
light up shoes
ultra boost
hermes belts for men
nike air huarache
kobe basketball shoes
adidas ultra boost
kyrie 3
adidas nmd