Estoy tratando de agregar opciones a una lista desplegable de select . Estoy haciendo esto dinámicamente con js .
Cuando hago esto con una lista de select , funciona, pero necesito agregar dinámicamente más listas de select , ya que el usuario desea agregar más conjuntos.
Mi única lista funciona bien así:
<body> <select class="js-example-basic-single" name="state"></select> </body> <script> $(document).ready(function() { $('.js-example-basic-single').select2(); }); load_workout_lst({{workout_list | tojson}}); let lst = {{workout_list | tojson}}; let e = document.getElementsByName('state'); console.log(e); for(var i = 0, l = lst.length; i < l; i++){ var option2 = lst[i]; e[0].options.add(new Option(option2)); } </script> Noté que cuando console.log(e) obtengo una NodeList . Como sé que solo hay un elemento en esa lista, elijo el primero. Accedo a sus options y le agrego. Funciona muy bien.
Cuando agrego el menú de selección dinámicamente, hago esto:
let exercise = $("#exercise"); var input; var input = $("<select>").attr("type", "text").attr("name", exerciseName).attr("tabindex", tabIndexNum); var br = $("<br>"); exercise.append(br); exercise.append(input); input.select2(); console.log(input); for(var i = 0, l = workout_lst.length; i < l; i++){ console.log(workout_lst[i]); var item = workout_lst[i]; input.options.add(new Option(item)); } tabIndexNum++; var workout_lst = []; function load_workout_lst(lst){ for (let i = 0; i < lst.length; i++){ workout_lst.push(lst[i]); } }Error:
Uncaught TypeError: input.options is undefined Cuando hago console.log(input) aquí obtengo un Object . Estoy seguro de que este es mi problema, simplemente no sé cómo presionar o agregar al Object . ¿Hay alguna manera diferente en la que deba agregar a un objeto? ¿Qué estoy haciendo mal aquí?