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>

7 comentarios:

La araña 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

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...

www0903

uggs outlet
canada goose jackets
yeezy boost 350
ralph lauren outlet
longchamp outlet
moncler online outlet
michael kors outlet online
ugg boots on sale 70% off
nike factory
fitflops sale clearance

5689 dijo...

zzzzz2018.9.3
yeezy shoes
ecco shoes
christian louboutin shoes
uggs outlet
salomon
prada shoes
ralph lauren uk
pandora outlet
ugg boots clearance
coach outlet

chenlili dijo...

coach outlet
ugg boots
lebron james shoes
canada goose outlet
christian louboutin shoes
polo ralph lauren
mcm outlet
coach outlet
polo outlet
coach outlet
yaoxuemei20181004

jeje dijo...

adidas shoes
ugg outlet
canada goose jackets
christian louboutin outlet
ugg outlet
ralph lauren polo
canada goose outlet
christian louboutin shoes
nike shoes
fitflops clearance