Question

Tengo un Select que debe cargar los datos de una base de datos en MySQL. En la primera opción (option) el valor del dato actual y en las opciones restantes los valores disponibles de la tabla Ciudad para posibles modificaciones. Carga correctamente, pero al dar click a la primera vez no se despliegan correctamente las opciones; al dar click la segunda vez funciona normalmente, al igual que la tercera y las siguientes. Esto solo me pasa en el navegador Chrome, en Firefox funciona correctamente desde la primera vez.
Lo hago de esta forma porque debe cargar la lista de las ciudades dependiendo de otro Select con lista de provincias.

En el Select, que está dentro de un div de clase .ClassCiudad. id_ciudad para la lista de ciudades. id_ciudad_prov para la ciudad actual.

$.ajax({
       data: {"id_ciudad": "<?php echo $row[9];?>", "id_ciudad_prov": "<?php echo $row[18];?>"},
              type: "POST",
              url: "Ciudad.php",
              success: function(response)
              {
                  $('.ClassCiudad select').html(response).fadeIn();
              }
      });

En Ciudad.php

require_once('Conexion/conexion.php');
    session_start();

    $sqlCiudad = "SELECT Id, Nombre FROM ciudad WHERE Provincia = ".$_REQUEST['id_ciudad_prov']." AND Id != ".$_REQUEST['id_ciudad']." ORDER BY Nombre ASC";

    $ciudad = $mysqli->query($sqlCiudad);

    $sqlCiudadAct = "SELECT Id_Unico, Nombre    
    FROM ciudad 
    WHERE Id = ".$_REQUEST['id_ciudad'];

    $ciudadAct = $mysqli->query($sqlCiudadAct);
    $rowAct = mysqli_fetch_row($ciudadAct);

    echo '<option value="'.$rowAct[0].'">'.utf8_encode($rowAct[1]).'</option>'; //La ciudad actual del registro.

    while ($rowC = mysqli_fetch_row($ciudad))
    {
        echo '<option value="'.$rowC[0].'">'.utf8_encode($rowC[1]).'</option>'; //La lista de las ciudades disponibles para modificar.
    }

Gracias de antemano.

Comments

Buenos días. Me podrían colaborar por favor @Leonardo-Tadei, @carlossevi . Se los agradezco de antemano.

---

Te faltó poner el código que desencadena la llamada de la carga de datos mediante $.ajax().

---

Buen día @carlossevi .Gracias por su atención.
Ese es todo el código que tengo para desplegar el select. Como lo comenté, en Firefox funciona correctamente pero en Chrome no.

---

Debes tener más código html y js, ¿cuándo se ejecuta la petición ajax?

---

Buen día @carlossevi . Gracias por atenderme.
Discúlpeme, creo que ud se refiere a esto:

<div class="ClassCiudad">
            <select name="ciudad" id="ciudad" >

            </select>
<script type="text/javascript">
$(document).ready(function()
{
    $(".ClassCiudad select").click(function()
    {
       $.ajax({
                  data: {"id_ciudad": "<?php echo $row[9];?>", "id_ciudad_prov": "<?php echo $row[18];?>"},
                  type: "POST",
                  url: "Ciudad.php",
                  success: function(response)
                  {
                  $('.ClassCiudad select').html(response).fadeIn();
                                }
                          });                    
                    });
                });
</script>
</div>

Es el código del select de ciudad.

---

El elemento HTML ¿es creado dinámicamente? Haz por favor la siguiente prueba, reemplaza esto:

$(".ClassCiudad select").click(function() {...});

Por:

$(".ClassCiudad").on('click','select', function() {...});

---

Buen día @carlossevi .
Hice el cambió, pero no funcionó como lo esperaba, el select solo no despliega correctamente. No obstante se me ocurrió otra solución que comparto.
Agradezco su interés por colaborarme.

Answer 1

Buen día a todos.
He encontrado mi solución. Había que cargar el select de dos formas, una con el evento change del select de provincia y la otra quitando el evento click que tenía ciudad; de tal suerte que el select ciudad se cargara junto con la página.

<div class="ClassCiudad">
            <select name="ciudad" id="ciudad" >

            </select>
<script type="text/javascript">
$(document).ready(function()
{

var cambio = 0;
                    //Este evento change funciona cuando se cambia el select de provincia.
                    $(".classProv select").change(function()
                    {
                        cambio = 1;
                        var form_data =
                        {
                                is_ajax: 1,
                                id_prov: +$(".classProv select").val()
                        };
                        $.ajax({
                                type: "POST",
                                url: "Ciudad.php", //En este archivo se hace una consulta que muestra todas las ciudades de la provincia seleccionada.
                                data: form_data,
                                success: function(response)
                                {
                                    $('.ClassCiudad select').html(response).fadeIn();
                                }
                        });
                    });

    if(cambio == 0) //Se verifica si el select de provincia no ha cambiado. Es decir, que cuando se carga la página, el select carga todos los registros de la tabla ciudad, incluso la ciudad actual.
    {
       $.ajax({
                  data: {"id_ciudad": "<?php echo $row[9];?>", "id_ciudad_prov": "<?php echo $row[18];?>"},
                  type: "POST",
                  url: "Ciudad_act.php",//En este archivo se hace una consulta que muestra todas las ciudades de la provincia actual, además de la cuidad actual.
                  success: function(response)
                  {
                  $('.ClassCiudad select').html(response).fadeIn();
                                }
                          });                    
                    });
                });
     }
</script>
</div>

Esta es la solución que se me ocurrió y funciona en varios navegadores.
Agradezco a todos su interés por colaborarme.
Hasta pronto.