Combo: no funciona bien defaultSelected en Explorer

[mariannairam]

Hola!

En Firefox y Safari funciona pero en Explorer no me funciona el defaultSelected cuando recibe los datos de la BBDD. Por ejemplo, si el registro tiene País: España, Ciudad: Toledo. Pues el país lo pone bien pero la ciudad me pone la primera del listado; esto solo ocurre con Explorer ¿alguna idea?:

Código PHP:

  
<?php
// Saco el listado de países
 
echo "<select name='id_pais' style='width:186px;' id='id_pais' onChange='componCiudades(this.value)'>\n";
echo "<option value=''>--País--</option>";
while ($row_pais_list = $result_pais_list->fetch_assoc()){
    $id_pais_com = $row_pais_list["id_pais"];
    $nombre_pais = $row_pais_list["nombre"];
    echo "<option value='" .$id_pais_com. "'";
    if ($id_pais_com==$id_pais) echo " selected='selected' ";
    echo ">" .$nombre_pais. "</option>\n";
}
echo "</select>\n\n";
?>
 
<script>
function componCiudades($id_pais_com){
document.formulario.id_ciudad.length=0;
document.formulario.id_ciudad.options[0] = new Option("-- Ciudad --","","defaultSelected","");
var indice=1;
 
<?php
while($row_ciudad_list = $result_ciudad_list->fetch_assoc()){ 
    $nombre_ciudad = $row_ciudad_list["nombre"];
    $id_ciudad_com = $row_ciudad_list["id_ciudad"];
    $id_pais_com_city = $row_ciudad_list["id_pais"];
 
?>
if($id_pais_com=='<?=$id_pais_com_city?>'){
    document.formulario.id_ciudad.options[indice] = new Option("<?=$nombre_ciudad?>","<?=$id_ciudad_com?>","","");
    if(<?=$id_ciudad_com?>=='<?=$id_ciudad?>'){document.formulario.id_ciudad.options[0] = new Option("<?=$nombre_ciudad?>","<?=$id_ciudad_com?>","defaultSelected","");} // Si tiene ciudad, la selecciono
    indice++;
    }
<?php } ?>
}
</script>
<?php
echo "<select name='id_ciudad' style='width:186px;' id='id_ciudad'>\n";
echo "<option value=''>--Ciudad--</option>\n";
    // Si existe el país, saco el listado de sus ciudades
    if ($id_pais!="") echo "<script>componCiudades('".$id_pais."');</script>";
echo "</select>\n\n";
?>   

[maycolalvarez]

es recomendable usar innerHTML para asignar todo el select de una vez en una capa

[mariannairam]

Gracias maycolalvarez! no he usado nunca innerHTML, y mis conocimientos en javascript son escasos, voy a ver cóme se usa y a probar…

[maycolalvarez]

es incluso más fácil, solo concatena toda la estructura del select en una sóla variable y se lo aplicas a un div que será el contenedor de dicho select

[mariannairam]

No sé si lo que he hecho es una 'burrada' porque no sé casi nada de javascript, he probado lo que me comentas de poner todo en una variable (que no sé cómo se usan en javascript) y en un div llamar a la variable con innerHTML (que tampoco sé cómo se usa) por supuesto no me funciona me parece que tengo que aprender javascript desde el principio....

Código Javascript:

<script>
var combo_ciudad ='
function componCiudades($id_pais_com){
document.formulario.id_ciudad.length=0;
document.formulario.id_ciudad.options[0] = new Option("-- Ciudad --","","defaultSelected","");
var indice=1;
 
<?php
while($row_ciudad_list = $result_ciudad_list->fetch_assoc()){ 
    $nombre_ciudad = $row_ciudad_list["nombre"];
    $id_ciudad_com = $row_ciudad_list["id_ciudad"];
    $id_pais_com_city = $row_ciudad_list["id_pais"];
 
?>
 
if($id_pais_com=='<?=$id_pais_com_city?>'){
    document.formulario.id_ciudad.options[indice] = new Option("<?=$nombre_ciudad?>","<?=$id_ciudad_com?>","","");
    if(<?=$id_ciudad_com?>=='<?=$id_ciudad?>'){document.formulario.id_ciudad.options[0] = new Option("<?=$nombre_ciudad?>","<?=$id_ciudad_com?>","defaultSelected","");} // Si tiene ciudad, la selecciono
    indice++;
    }
<?php } ?>
}
'
document.getElementById(combo_ciudad).innerHTML='combo_ciudad';
</script>
<?php
 
echo "<div id='combo_ciudad'>";
echo "<select name='id_ciudad' style='width:186px;' id='id_ciudad'>\n";
echo "<option value=''>--Ciudad--</option>\n";
    // Si existe el país, saco el listado de sus ciudades
    if ($id_pais!="") echo "<script>componCiudades('".$id_pais."');</script>";
echo "</select>\n\n";
echo "</div>";
 
?>
 

[mariannairam]

¡Solucionado!

No he sido capaz de concatenar toda la estructura del select en una sóla variable, tal como decía maycol (en php sé hacerlo pero en javascript... ni idea), pero al menos funciona ya en Explorer. Lo que he hecho es añadir en el script la siguiente línea:

Código Javascript:

document.formulario.id_ciudad.options[0].selected = true;
 

Lo dejo aquí por si a alguien le hace falta:

Código Javascript:

<script>
function componCiudades($id_pais_com){
document.formulario.id_ciudad.length=0;
document.formulario.id_ciudad.options[0] = new Option("-- Ciudad --","","defaultSelected","");
var indice=1;
 
<?php
while($row_ciudad_list = $result_ciudad_list->fetch_assoc()){ 
    $nombre_ciudad = $row_ciudad_list["nombre"];
    $id_ciudad_com = $row_ciudad_list["id_ciudad"];
    $id_pais_com_city = $row_ciudad_list["id_pais"];
 
?>
    if($id_pais_com=='<?=$id_pais_com_city?>'){
        if(<?=$id_ciudad_com?>=='<?=$id_ciudad?>'){
            document.formulario.id_ciudad.options[0] = new Option("<?=$nombre_ciudad?>","<?=$id_ciudad_com?>");
            document.formulario.id_ciudad.options[0].selected = true;
            }
        document.formulario.id_ciudad.options[indice] = new Option("<?=$nombre_ciudad?>","<?=$id_ciudad_com?>");
        indice++;
        }
    <?php } ?>
}
</script>