rellenar combos dinámicamente

debspain · #1 (**permalink**) 03/09/2008, 05:27

Hola a todos,

Tengo un script que me está dando muchos problemas, y al final me he decidido a pediros ayuda, para ver si alguien tiene idea de que está pasando.

El script completo es un poco complicado, pero mi problema radica en lo que explico a continuación.

Tengo 3 selects de la misma clase y con las mismas opciones, que a su vez estan guardadas en un array.
Cuando el usuario selecciona alguna opcion de cualquiera de los 3 selects, se llama a una función que borra las opciones de los selects, y luego las añade de nuevo desde el contenido del array.

Hasta aqui todo bien, pero el problema está en que justo antes de borrar sus opciones iniciales, recojo el valor de la opción que habia seleccionada, y así a la hora de cargar las nuevas opciones desde el array, le pongo selected a la opción correspondiente. Ésto, en Firefox, funciona de maravilla, pero en I.Explorer parece que hay un problema de orden de ejecución o alguna cosa extraña que no soy capaz de averiguar...
El caso es que si pongo un alert() en la función que rellena los select, todo va bien en IE, pero en cuanto quito el alert(), siempre le pone selected a la primera opcion, aunque no sea la correcta...

Ah! un detalle interesante es que aunque en el ejemplo relleno las opciones usando prototype, me pasa exactamente lo mismo aunque lo haga en javascript normalmente...
Alguien puede ayudarme????

He preparado el código HTML de la pagina en la que podáis ver el problema, y compararlo con lo que hace Firefox, ya que ahí funciona perfecto todo..

Código HTML:

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
		<script type="text/javascript" src="js/prototype.js"></script>
		<script type="text/javascript">
			var arrGr = new Array();
			var arrRegVin = new Array();
			
			function grupVinculant(codGr,arrRg){
				this.codGr = codGr;
				this.arrRegVin = arrRg;
			}
			function registreVin(codi,desc){
				this.codi = codi;
				this.descripcio = desc;
			}
						
			arrRegVin = new Array();
			arrRegVin[0] = new registreVin("1","Opcion 1");
			arrRegVin[1] = new registreVin("2","Opcion 2");
			arrRegVin[2] = new registreVin("3","Opcion 3");
			arrGr[0] = new grupVinculant("grupo1",arrRegVin);
 
			function checkCboVinc(cboIdSel, cboClass, valorSel, inxArrGr){
				var arrCbo = $("formFormulari").getElementsByClassName(cboClass);
				var inx,valorCbo,objCombo;
				var objOption,inx,swSelected;
				var arrRegistros,objOption;

				for (inx = 0; inx < arrCbo.length; inx++){
					objCombo = arrCbo[inx];
					valorCbo = $(objCombo).getValue();
					objCombo.options.length = 0;
					arrRegistros = arrGr[inxArrGr].arrRegVin;

					objOption = new Element("option", { 'value': '' });
					$(objOption).update("");
					$(objCombo).insert(objOption);

					for (inx2 = 0; inx2 < arrRegistros.length; inx2++){
						swSelected = false;
						if (arrRegistros[inx2].codi == valorCbo) swSelected = true;

						objOption = new Element("option", { 'value': arrRegistros[inx2].codi, 'selected': swSelected});
						$(objOption).update(arrRegistros[inx2].descripcio);
						$(objCombo).insert(objOption);
					}
				}
			}
		</script>
	</head>
	<body>
		<form name="form1" method="post" id="formFormulari">
			<div>
				<select class="grupo1" id="cbo1" name="cbo1" onchange="checkCboVinc('cbo1','grupo1',this.value,0);">
					<option value=""></option>
					<option value="1">Opcion 1</option>
					<option value="2">Opcion 2</option>
					<option value="3">Opcion 3</option>
				</select>
			</div>
			<br />
			<div>
				<select class="grupo1" id="cbo2" name="cbo2" onchange="checkCboVinc('cbo2','grupo1',this.value,0);">
					<option value=""></option>
					<option value="1">Opcion 1</option>
					<option value="2">Opcion 2</option>
					<option value="3">Opcion 3</option>
				</select>
			</div>
			<br />
			<div>
				<select class="grupo1" id="cbo3" name="cbo3" onchange="checkCboVinc('cbo3','grupo1',this.value,0);">
					<option value=""></option>
					<option value="1">Opcion 1</option>
					<option value="2">Opcion 2</option>
					<option value="3">Opcion 3</option>
				</select>
			</div>
		</form>
	</body>
</html>