0

Estoy intentando añadir opciones a un select, pero lo que ocurre es que se añaden pero vacías: <option></option>. Les muestro mi código:

//AQUÍ MIRO EL VALOR DE UN SELECT ANTERIOR, PORQUE DE ESTE DEPENDE EL RESTO
var typeID = document.getElementById("type");
var type = typeID.options[typeID.selectedIndex].value;

//AQUÍ PONGO LOS VALORES DEL SELECT PARA AMBOS CASOS
item0={
    o1:{value:1,text:"Texto 1"},
    o1:{value:1,text:"Texto 2"},
    o2:{value:2,text:"Texto 3"}
}
item1={
    o1:{value:1,text:"Texto 1"},
    o2:{value:2,text:"Texto 2"}
    }

//SI EL VALOR DE "TYPE" ES 0, SE AÑADEN UNOS SELECT, SI ES 0, OTROS.
if (type == 0) {
    $.each(item0, function (i, item) {
        $('#action').append($('<option>', { 
            value: item0.value,
            text : item0.text 
        }));
    });
} else if (type == 1) {
    $.each(item1, function (i, item) {
        $('#action').append($('<option>', { 
            value: item1.value,
            text : item1.text 
        }));
    });
}

2 respuestas 2

1

Con tu código seria así:

const item0={
  o1:{value:1,text:"Texto 1"},
  o1:{value:1,text:"Texto 2"},
  o2:{value:2,text:"Texto 3"}
};

const item1={
  o1:{value:1,text:"Texto 1"},
  o2:{value:2,text:"Texto 2"}
};

$("#type").change(function(){
  
  $('#action option').remove();
  const type = parseInt($(this).val());
  
  if (type == 0) {
    $.each(item0, function (i, item) {
      $('#action').append($('<option>', { 
        value : item.value,
        text  : item.text 
      }));
    });
  } else if (type == 1) {
    $.each(item1, function (i, item) {
      $('#action').append($('<option>', { 
         value: item.value,
         text : item.text 
      }));
    });
  }

});
<select id="type">
  <option selected disabled>Selecciona un tipo</option>
  <option value="0">Tipo 0</option>
  <option value="1">Tipo 1</option>
</select>

<select id="action"><select>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

El problema era como accedias a los valores, antes lo hacias así:

$('#action').append($('<option>', { 
  value: item0.value,
  text : item0.text 
}));

y es:

$('#action').append($('<option>', { 
  value: item.value,
  text : item.text 
}));

Cuando haces el $.each ya estas indicando que array estas usando y para acceder a los valores no tienes que indicar nuevamente de que array viene el value y el text

0

El problema está en cómo accedes a los datos que declaras para cada item. Pongo un ejemplo con el item0, el cual declaro como un array con los objetos y accedo a cada uno utilizando el índice i que declaras en la función al recorrer el array para rellenar las opciones.

item0=[
    {value:1,text:"Texto 1"},
    {value:2,text:"Texto 2"},
    {value:3,text:"Texto 3"}
];

    $.each(item0, function (i, item) {
        $('#action').append($('<option>', { 
            value: item0[i].value,
            text : item0[i].text 
        }));
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="action">
<option value="0">selecciona</option>
</select>

Tu Respuesta

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

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