Lo tengo funcionando para el primer elemento, pero tan pronto como trato de presionar otro elemento, se vuelve a llenar y selecciona el primer elemento.
HTML:
<select id="line" name="line"> <option selected="selected" disabled="true">Auswahl...</option> </select>Población:
$(document).ready(function(){ var lineselects = document.getElementsByName("line"); lineselects.forEach($line => $line.addEventListener('click', popLines)); }); function popLines(){ fetch('ajax0.php',{method:'post'}) .then( r=>r.json() ) .then( json=>{ line.innerHTML=''; Object.keys( json ).forEach( key=>{ let obj=json[ key ]; line.append( new Option( obj.line, obj.line ) ); }) }) };Información necesaria: necesito agregar EventListener a cada elemento de NodeList, ya que cada elemento es una selección que debe completarse. ¿Debería dividir las poblaciones o también está bien?
¿Cómo evito que vuelva a llenar la selección?
EDITAR: para cualquier persona que tropiece con esta respuesta, no use EventListener en cada elemento de NodeList, use document.ready para cada selección que desee completar por separado -> si presiona cualquier otro elemento de NodeList, solo el primero se llenará.
Estás vaciando el elemento line <select> vacío con cada fetch , pero parece que quieres vaciarlo solo por primera vez, la mejor manera que se me ocurre es usar algún tipo de bandera para que sepas que es la primera tiempo.
$(document).ready(function(){ var lineselects = document.getElementsByName("line"); lineselects.forEach($line => $line.addEventListener('click', popLines)); }); function popLines(){ fetch('ajax0.php',{method:'post'}) .then( r=>r.json() ) .then( json=>{ if ( $( '#line' ).data('first-time') != 'no' ) { line.innerHTML=''; $( '#line' ).data('first-time', 'no'); } Object.keys( json ).forEach( key=>{ let obj=json[ key ]; line.append( new Option( obj.line, obj.line ) ); }) }) };