0

He realizado un servicio rest realizado con C# con petición ajax en un combo box, este objeto muestra los datos de mi servicio rest, este combo box debe llenar datos de muchas ciudad y este muestra las ciudades que realice en el servicio, pero el inconveniente esta en el objeto combo box o select option en html5, siempre que doy en el objeto, me carga los datos y no puedo seleccionar mi ciudad que quiero, volviéndolo a cargar, como un bucle infinito cuando deseo seleccionar el dato Anexo código


 <div class="form-group has-feedback">

                <label>Ciudad</label>
                <select class="form-control" data-rel="chosen"  id="Ciudad" name="Ciudad" onclick="ValidarExisteCiudad()">
                    <option></option>
                    <option></option>
                </select>

            </div>

function ValidarExisteCiudad() {
    //$("[data-rel='chosen']").chosen();
    //var ddlCiudad = $("[data-rel='chosen']");
    var ddlCiudad = $("#Ciudad");
    ddlCiudad.empty().append('<option selected="selected" value="0" disabled = "disabled">Loading.....</option>');
        $.ajax({
            type: 'GET',
            url: "CargaCiudad",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {


                ddlCiudad.empty().append('<option selected="selected" value="0">Seleccione ...</option>');
                $.each(data, function () {
                   ddlCiudad.append($("<option></option>").val(this['Value']).html(this['Text']));

                });
                // After updated data from database you need to trigger chosen:updated.
                //$("[data-rel='chosen']").trigger("chosen:updated");
            },  
            failure: function (data) {
                alert(data.responseText);
            },
            error: function (data) {
                alert(data.responseText);
                existeUsuario = false;
            }
        });




}


[HttpGet]
        [AllowAnonymous]
        public async Task<IActionResult> CargaCiudad()
        {
            List<Cuidad> Items = await drHelpPrueba.Cuidad.ToListAsync();
            List<SelectListItem> ciudad = new List<SelectListItem>();

            for (int i = 0; i < Items.Count; i++)
            {
                ciudad.Add(new SelectListItem
                {
                    Value = Convert.ToString(Items.ToList()[i].IdCiudad),
                    Text = Items.ToList()[i].Nombre
                });
            }

            return Json(ciudad);

        }

Imagen del Combo box

introducir la descripción de la imagen aquí

Cuando deseo seleccionar una ciudad, este vuelve a cargar

introducir la descripción de la imagen aquí

1 respuesta 1

0

No veo porque esperas un resultado diferente al que mencionas si usas el evento click del mismo control que estas cargando, al desplegar se ejecuta el evento volviendose a recargar cada vez.

Sino quiere que suceda esto no usas el evento click, podria ser

<select class="form-control" data-rel="chosen"  id="Ciudad" name="Ciudad">
</select>

y defines la carga al inicio del form

<script>
   $(function(){

         ValidarExisteCiudad();

   });

   //aqui defines ValidarExisteCiudad()

</script>

al usar el $(function(){ es el equivalente a $.ready() de jquery con lo cual se ejecua cuando el DOM del Html este cargado en la pagina o sea seria el load

Es en ese momento donde debes cargar el combo, asi al seleccionar un item no se recarga en el click

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.