I’ve got it working for the first element, but as soon as i try to press another element it repopulates itself and selects the first element.
HTML:
<select id="line" name="line"> <option selected="selected" disabled="true">Auswahl...</option> </select>
Population:
$(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 ) ); }) }) };
Necessary Information: I need to add the EventListener to every element of the NodeList as every Element is a select that needs to be populated. Should I split the populations up or is this fine too?
How do I prevent it from repopulating the select?
EDIT: For anyone stumbling on this answer, don’t use the EventListener on every element of the NodeList, use the document.ready for every select you want to populate seperately -> if you press on any other element of the NodeList, only the first will get populated.
Advertisement
Answer
You are emptying the line
<select>
element empty with each fetch
, but it looks like you want to empty it only for the first time, the best way I can think of is to use some sort of flag so that you know it’s the first time.
$(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 ) ); }) }) };