[SOLUCIONADO] Error <select> on Firefox

scobee · #1 (**permalink**) 07/05/2013, 08:09

Hola tengo el siguiente código HTML

<body onload="init()">
<div class="container_24">
<form name="formSearch" action="https://sites.google.com/a/bbva.com/implantaciones-eyp/home/implantaciones" method="get" target="_parent">
<div id="content_div" class="caja">
<div class="titulo">Histórico de Implantaciones</div>

<li><span style="padding-left:2px;" class="nameLabel">Año:</span><label><span class="c-form-combo" id="combo">
<select style="display: none;" id="anyo" name="anyo" onchange="selectDateOption(this.options[this.selectedIndex].value);">
</select></span></label></li>

<li><span class="nameLabel">Mes:</span><label for="meses"><span class="c-form-combo" id="combo">
<select style="display: none;" id="meses" name="meses" onchange="selectTopicOption(this.options[this.selectedIndex].value);">
</select></span></label></li>

<li class="search"><button type="submit" id="allcontent">Ver</button></li>
</div>
</form>
</div>
</body>

en Chrome consigo verlo bien pero en FF en vez de aparecerme la caja con el select me sale como un enlace. He puesto Firebug y cual es mi sorpresa al ver que mete un tag <a....

el problema es que en Firefox me aparece los valores por defecto del select y no se despliega. En Chrome si logro pinchar y deplegar la lista con las options

aqui meto las options...por si os sirve tamb

function init()
{
var htmlCode ="";
for (var i=0;i<year.length;i++)
{
document.getElementById('anyo').innerHTML += "<option selected='selected' value='"+year[i]+"'>"+year[i]+"</option>";
}
htmlCode +="<option selected='selected' value='01'>Enero</option>";
htmlCode +="<option value='02'>Febrero</option>";
htmlCode +="<option value='03'>Marzo</option>";
htmlCode +="<option value='04'>Abril</option>";
htmlCode +="<option value='05'>Mayo</option>";
htmlCode +="<option value='06'>Junio</option>";
htmlCode +="<option value='07'>Julio</option>";
htmlCode +="<option value='08'>Agosto</option>";
htmlCode +="<option value='09'>Septiembre</option>";
htmlCode +="<option value='10'>Octubre</option>";
htmlCode +="<option value='11'>Noviembre</option>";
htmlCode +="<option value='12'>Diciembre</option>";
document.getElementById('meses').innerHTML = htmlCode;
Loaditems();
}

alguien lo entiende porque yo no?

Gracias

MagoMarlon · #2 (**permalink**) 07/05/2013, 08:39

Hola amigo creo que el error está en que cuando haces el for para armar el selec anyo a todos los option le estas poniendo el atributo 'selected'. no puede ser que todos los option esten seleccionados y eso te traerá conflicto. Recuerda que algunos navegadores son mas flexibles que otros.

Puedes primero armar el option (sin selected) y luego asignarle a ese select el valor por defecto...

scobee · #3 (**permalink**) 07/05/2013, 08:47

mmmm gracias por contestar pero creo que no va por ahi el tema. Probé a quitarle el selected='selected' y sigue sin funcionar.

MagoMarlon · #4 (**permalink**) 07/05/2013, 08:58

de seguro ese selected te está trayendo conflicto, también creo que el += que pones luego del innerHTML no hace falta,, en ves de ser así

Código Javascript:

Ver originaldocument.getElementById('anyo').innerHTML += "<option selected='selected' value='"+year[i]+"'>"+year[i]+"</option>";

Deberia ser así

Código Javascript:

Ver originaldocument.getElementById('anyo').innerHTML = "<option  value='"+year[i]+"'>"+year[i]+"</option>";

Prueba a ver si te sirve ;)

scobee · #5 (**permalink**) 07/05/2013, 09:08

el selected='selected' lo he quitado y pese a ello sigue dando problemas. Esta forma "document.getElementById('anyo').innerHTML +=" es la que utilizo para añadir contenido a un div por tanto si pongo lo que tu me dices solo añadirá una opcion en este caso la última iteración del bucle For, y eliminara todo lo que haya en ese div anteriormente.

Fijate que tengo dos select uno lo relleno con un bucle For y otro se lo meto a piñon.

MagoMarlon · #6 (**permalink**) 07/05/2013, 09:15

Cierto, tienes toda la razón, es la costumbre de usar el .append de jquery,,, oye la verdad no se que pueda ser, lo siento :/ bueno yo haría todo eso cn query... Saludos

scobee · #7 (**permalink**) 07/05/2013, 09:17

nada gracias de todas formas

ocp001a · #8 (**permalink**) 07/05/2013, 11:53

Veo que metes html al select en vez de construir sus opciones.

Código Javascript:

Ver originaldocument.getElementById('anyo').length=0;//eliminamos los options del select
for (var i=0;i<year.length;i++){
   document.getElementById('anyo').length++;//creamos una nueva opcion vacia
   document.getElementById('anyo').options[i].value=year[i];//creamos el value de la opcion
   document.getElementById('anyo').options[i].text=year[i];//creamos el texto de la opcion
}

emprear · #9 (**permalink**) 07/05/2013, 20:24

Cita:

Iniciado por scobee

Hola tengo el siguiente código HTML

<body onload="init()">
<div class="container_24">
<form name="formSearch" action="https://sites.google.com/a/bbva.com/implantaciones-eyp/home/implantaciones" method="get" target="_parent">
<div id="content_div" class="caja">
<div class="titulo">Histórico de Implantaciones</div>

<li><span style="padding-left:2px;" class="nameLabel">Año:</span><label><span class="c-form-combo" id="combo">
<select style="display: none;" id="anyo" name="anyo" onchange="selectDateOption(this.options[this.selectedIndex].value);">
</select></span></label></li>

<li><span class="nameLabel">Mes:</span><label for="meses"><span class="c-form-combo" id="combo">
<select style="display: none;" id="meses" name="meses" onchange="selectTopicOption(this.options[this.selectedIndex].value);">
</select></span></label></li>

<li class="search"><button type="submit" id="allcontent">Ver</button></li>
</div>
</form>
</div>
</body>

en Chrome consigo verlo bien pero en FF en vez de aparecerme la caja con el select me sale como un enlace. He puesto Firebug y cual es mi sorpresa al ver que mete un tag <a....

el problema es que en Firefox me aparece los valores por defecto del select y no se despliega. En Chrome si logro pinchar y deplegar la lista con las options

aqui meto las options...por si os sirve tamb

function init()
{
var htmlCode ="";
for (var i=0;i<year.length;i++)
{
document.getElementById('anyo').innerHTML += "<option selected='selected' value='"+year[i]+"'>"+year[i]+"</option>";
}
htmlCode +="<option selected='selected' value='01'>Enero</option>";
htmlCode +="<option value='02'>Febrero</option>";
htmlCode +="<option value='03'>Marzo</option>";
htmlCode +="<option value='04'>Abril</option>";
htmlCode +="<option value='05'>Mayo</option>";
htmlCode +="<option value='06'>Junio</option>";
htmlCode +="<option value='07'>Julio</option>";
htmlCode +="<option value='08'>Agosto</option>";
htmlCode +="<option value='09'>Septiembre</option>";
htmlCode +="<option value='10'>Octubre</option>";
htmlCode +="<option value='11'>Noviembre</option>";
htmlCode +="<option value='12'>Diciembre</option>";
document.getElementById('meses').innerHTML = htmlCode;
Loaditems();
}

alguien lo entiende porque yo no?

Gracias

En realidad mucho no se entiende, menos aún que hace
Loaditems() ?????

Ahora que en apariencia lo que querés es crear dinamicamente los selects de año y mes, bueno eso se hace asi (también incluye los dias)

http://foros.emprear.com/javascript/...sto_form.phtml
analizá el código fuente, las validaciones las podés obviar

SAludos

scobee · #10 (**permalink**) 08/05/2013, 09:32

tios ya lo tengo no era problema de jquery ni js era de linkado de css en Google Sites. el fichero de css lo tenia que subir al site y no linkarlo desde Google Code.

Gracias a todos!!!