TypeError: Kann die Eigenschaft 'innerHTML' von null nicht mit einem korrekten Skriptort und div ID

Question

setzen, also versuche ich herauszufinden, wie ich eine < Auswahl> mit Markennamen aus meiner firebase Tabelle auffüllen kann. aber wenn meine Seite zu laden innerHTML- Funktion null

gefunden ich habe:

• ein richtiger Ort für meine Skript - passiert, wenn mein Skript in einem OnLoad Abschnitt in meinem Js gesetzt wird oder direkt vor den </body>
• ein für meine div richtigen Namen - da es der häufigste Fall ist, ich benennen sie es mit 3 Buchstaben, nie irgendwo anders in dem Dokument

jetzt das ich verwendet habe:

<fieldset class="inline-fields" id="inline-field1"> 
<div class = "row"> 
    <div class = "col-sm-4"> 
     <div class="form-group" id="select1"> 
      <select name="select-in" id="sel" class="form-control input-lg selectpicker" data-title="Marque" data-style="input-lg btn-default" data-live-search="true"> 
      <div id="selsel"></div> 
      </select> 
     </div> 
    </div> 
    <div class = "col-sm-8"> 
     <div class="row"> 
     <div class="col-sm-6"> 
      <input type="text" class="form-control form_after input-lg" id="form1" placeholder="Email"/> 
     </div> 
     <div class="col-sm-6"> 
      <input type="text" class="form-control form_after input-lg" id="form2" placeholder="Code Postal"/> 
     </div> 
     </div> 
    </div> 
</div></fieldset> 

und ich versuche, die #selsel < div> in der #sel < wählen Ziel>, aber ich fügen Sie den ganzen Fieldset mit Bootstrap-Klasse für eine genauere Informationen

hier ist die js:

  <script type="text/javascript"> 
      var html = ""; 
      firebase.database().ref('brand').on('value', function(snapshot) { 
       var brand = snapshot.val(); 
       for (var i in brand) { 
        if (brand.hasOwnProperty(i) && typeof(i) !== 'function') { 
         elem = brand[i]; 
         console.log(elem); 
         html += '<option>' 
         html += elem 
         html += '</option>' 
        } 
       } 
       document.getElementById('selsel').innerHTML = html; 
      }); 
     </script> 
    </body> 

wie Sie sehen können, direkt vor Körperenden, es Feuerbasis Daten zu sammeln, verwenden, am Ende, schaut meine Elem Ausgabe wie diese elem output screenshot und meine html ouput wie diese html output screenshot ein weitere interessante Sache ist, wenn ich die #sel id setzte in

document.getElementById('selsel').innerHTML = html; 

statt selsel (Wich ist jeweils der select # sel und der Unter div # selsel) Ich sehe nicht den Fehler aber nichts kam bevölkern die Auswahl

Answer 1

Einfach können Sie div innerhalb select nicht setzen, wird der Browser es nicht rendern. Das Ausführen des Schnipsel Code, den Sie zur Verfügung gestellt haben und inspizieren Element

Nur innen wählen <option> oder <optgroup> erlaubt.

Also einfach <option> Elemente direkt in <select> anhängen, es gibt keinen Sinn, sie in <div> hinzuzufügen, es sei denn, Sie wollen benutzerdefinierte Ansicht von Optionen, die eine andere Sache ist. Und in diesem Fall können Sie Select2 oder bootstrap-select verwenden.

Da Sie Bootstrap verwenden, warum verwenden Sie nicht jQuery.

<script type="text/javascript"> 
$(document).ready(function(){ 
    var html = ""; 
    firebase.database().ref('brand').on('value', function(snapshot) { 
     var brand = snapshot.val(); 
     for (var i in brand) { 
      if (brand.hasOwnProperty(i) && typeof(i) !== 'function') { 
      elem = brand[i]; 
      console.log(elem); 
      html += '<option>' 
      html += elem 
      html += '</option>' 
      } 
     } 
     $("#sel").html(html); 
    }); 
}); 
</script> 

Edit 1

Da Sie Bootstrap-select verwenden, entfernen Sie zunächst die Klasse selectpicker von <select>

<div class="form-group" id="select1"> 
    <select name="select-in" id="sel" class="form-control input-lg" data-title="Marque" data-style="input-lg btn-default" data-live-search="true"> 
    </select> 
</div> 

Dann

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var html = ""; 
     firebase.database().ref('brand').on('value', function(snapshot) { 
      var brand = snapshot.val(); 
      for (var i in brand) { 
       if (brand.hasOwnProperty(i) && typeof(i) !== 'function') { 
       elem = brand[i]; 
       console.log(elem); 
       html += '<option>' 
       html += elem 
       html += '</option>' 
       } 
      } 
      $("#sel").html(html); 
      $('#sel').selectpicker(); //you can pass options if you want 

     }); 
    }); 
    </script>