0

Estoy teniendo un problema al crear un select con varios options que los recojo de una base de datos. El código que tengo de jquery para crear el select es este:

 var listaGrupoEmpresarial = Codigos.getListaCodigos('C_listaGrupoEmpresarial');
                for(var i=0; i<listaGrupoEmpresarial.length; i++){
                    var option = "<option data-res-capitalize='" + listaGrupoEmpresarial[i].no_campo + "' value='" + listaGrupoEmpresarial[i].no_campo + "'>" + listaGrupoEmpresarial[i].no_campo + "</option> ";

$(me.divNameSelector+" #proGrupo").append(option);
}

He intentado más maneras para añadirlo:

var option = $("<option />",{
                        value: listaGrupoEmpresarial[i].valor,
                        text: listaGrupoEmpresarial[i].texto,
                        "data-res-capitalize" : listaGrupoEmpresarial[i].no_campo
                    });

ó

$('#proGrupo').append($('<option>',{
                        value: listaGrupoEmpresarial[i].no_campo,
                        text: listaGrupoEmpresarial[i].no_campo,
                        "data-res-capitalize" : listaGrupoEmpresarial[i].no_campo
                    }));

pero siguen sin funcionar. En la lista listaGrupoEmpresarial[i].no_campo hay como 300 registros. Lo que me pasa es que no me escribe texto en los options, lo que si me hace es pintar el value y el data-res-capitalize, aun habiendo puesto los mismos datos en el value, texto y data-res-capitalize. He inspeccionado el select y me salen los 300 vacíos, un ejemplo de lo que me sale:

<select id="proGrupo" class="campoEditando" style="display:inline-block;">
    <option data-res-capitalize="cualquiera" value="cualquiera">Cualquiera</option> 
    <option data-res-capitalize="AASTRA" value="AASTRA"></option> 
    <option data-res-capitalize="ABENGOA" value="ABENGOA"></option> 
    <option data-res-capitalize="ACCENTURE" value="ACCENTURE"></option> 
</select>

A ver si me podéis ayudar, muchas gracias.

1
  • La parte que vemos de tu código debería funcionar tal cual como está, algo en otra parte de tu código debe estar causando el problema. usas luego alguna librería o algo para renderizar el select? te recomendaría añadir todo el código que pueda tener injerencia sobre ese select. Commented el 16 jul. 2018 a las 13:18

2 respuestas 2

0

Prueba a añadir el valor como html:

for(var i=0; i<listaGrupoEmpresarial.length; i++){
   var option = "<option data-res-capitalize='" + listaGrupoEmpresarial[i].no_campo + "' value='" + listaGrupoEmpresarial[i].no_campo + "'>" + listaGrupoEmpresarial[i].no_campo + "</option> ";

    $(me.divNameSelector+" #proGrupo").html(option);
}
5
  • También lo he intentado, he intentado varias maneras para añadir options al select y nada, sigue sin funcionar... Commented el 16 jul. 2018 a las 13:13
  • Por probar, porque se ve correcto, si cambias esta parte " + listaGrupoEmpresarial[i].no_campo + " por un texto de prueba escrito a mano ¿lo muestra?
    – Carmen
    Commented el 16 jul. 2018 a las 13:18
  • esta solucion es incorrecta, lo que va a lograr es que el select quede solo con la ultima option agregada, la funcion html borra todo el contenido del select y hace un append de lo que le pasas como parametro Commented el 16 jul. 2018 a las 13:20
  • @Carmen no, tampoco lo muestra.. Commented el 16 jul. 2018 a las 13:21
  • @RichardSánchezColiao el problema es entonces externo, de algún modo modificas el select posteriormente y está afectando al html interno, por eso rellena los atributos pero no ves el valor del option
    – Carmen
    Commented el 16 jul. 2018 a las 13:23
0

Como han dicho varios compañeros, puede que el problema esté en otra parte. Aunque aquí: $(me.divNameSelector+" #proGrupo").append(option); no se entiende bien por qué usas me.divNameSelector si lo que quieres alcanzar es el select con id #proGrupo.

Otra cosa que no conviene es que añadas cada opción dentro del bucle, eso obliga a hacer n actualizaciones del DOM, siendo n el total de elementos que vayas a recorrer... 300, 1000, 10500 ... Conviene concatenar dentro del bucle y fuera de él hacer el append.

Aquí muestro un ejemplo llamando a algunos usuarios de Github. Uso estos datos de prueba ya que es imposible acceder a los datos en tu contexto. De todos modos, aplica el mismo principio.

La llamada Ajax también es para fines de demostración. Lo imporante es lo que ocurre en este bloque: $.each(data, function(k, v) { ... y el append que se hace después, fuera del each.

Espero sea de utilidad.

$(function() {
  var request =
    $.ajax({
      url: "https://api.github.com/users",
      method: "GET",
      dataType: "json"
    });

  request.done(function(data) {
    var selOptions = '';

    $.each(data, function(k, v) {
      selOptions += '<option value=' + v.id + '>' + v.login + '</option>';
    });
    $('#proGrupo').append(selOptions);

  });

  request.fail(function(jqXHR, textStatus) {
    alert("Error en la petición: " + textStatus);
  });

  $('#proGrupo').on('change', function() {
    console.log(`El id del usuario ${this.options[this.selectedIndex].text}  es ${this.value}`);
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="proGrupo" class="campoEditando" style="display:inline-block;">
</select>

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.