Add HTML basierend auf Wert auswählen

Question

Ich versuche, einige HTML basierend auf einem ausgewählten Wert einfügen, ich habe 12 Werte haben dann unterschiedliche HTML eingefügt basierend auf was jeder Wert ist. Ich habe das schon einmal gemacht und sogar den Code von vorher mit leichten Änderungen an dem Code verwendet, mit dem ich heute arbeite.

Mein HTML-Code ist:

{% extends '../../layouts/appDashboard.html' %} 

{% block title %}{{title}}{% endblock %} 

{% block content %} 
<div class="container-fluid container-max"> 
     <div><br><br></div> 

     <div class="box box-warning box-solid"> 
      <div class="box-header with-border"> 
       <h3 class="box-title">Create Model</h3> 
       <div class="box-tools pull-right"> 
       <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i> 
       </button> 
       </div> 
      </div> 
      <!-- /.box-header --> 
      <div class="box-body no-padding"> 
       <div class="row"> 
       <div class="col-md-3 col-sm-8"> 
        <!-- Content here --> 
        <div class="container"> 
         <div class="col-md-6 col-md-offset-2"> 
         <form role="form-inline"action="/dashboard/it/model/new" method="POST"> 
         <div class="box-body"> 
          <div class="form-group"> 
           <label for="templateName" class="control-label">Template Name</label> 
           <input type="text" class="form-control" id="name" placeholder="Asset Template Name"> 
          </div> 
          <div class="form-group"> 
           <label for="manufacturer" class="control-label">Manufacturer</label> 
           <select class="form-control selectpicker" title="Manufacturer" name="manufacturer" data-live-search="true"> 
            <option value="cisco">Cisco</option> 
            <option value="other">Other</option> 
           </select> 
          </div> 

          <div class="form-group"> 
           <label for="model" class="control-label">Model Name</label> 
           <input type="text" class="form-control" id="model" placeholder="Model Name"> 
          </div> 

          <div class="form-group"> 
           <label for="type" class="control-label">Type</label> 
           <select class="form-control selectpicker" title="Type of Asset" name="type" data-live-search="true" id="type" onchange="typePicker()"> 
            <option value="aps">Access Point</option> 
            <option value="Cable">Cable</option> 
            <option value="Desktop">Desktop</option> 
            <option value="Laptop">Laptop</option> 
            <option value="Desk Phone">Desk Phone</option> 
            <option value="Mobile Phone">Mobile Phone</option> 
            <option value="Monitor">Monitor</option> 
            <option value="Printer">Printer</option> 
            <option value="Projector">Projector</option> 
            <option value="Router">Router</option> 
            <option value="Switch">Switch</option> 
            <option value="Tablet">Tablet</option> 
           </select> 
          </div> 

          <div class="form-group" id="typeInputs"> 

          </div> 

          <div class="form-group"> 
           <label for="asset number">Asset Number</label> 
           <input type="number" class="form-control" id="assetNumber" placeholder="Asset Number"> 
          </div>   <!-- Asset Number --> 

          <div class="form-group"> 
           <label for="notes">Notes</label> 
           <textarea class="form-control" rows="3" id="notes" placeholder="Notes.."></textarea> 
          </div>   <!-- Notes --> 

          <div class="btn-group" data-toggle="buttons"> 
           <label for="">User Assignable</label><br> 
           <label class="btn btn-primary"> 
           <input type="radio" name="signout" id="option1"> Yes 
           </label> 
           <label class="btn btn-primary"> 
           <input type="radio" name="signout" id="option2"> No 
           </label> 
          </div> 

         </div> 
         <!-- /.box-body --> 
         <div class="box-footer"> 
         <button type="submit" class="btn btn-primary">Submit</button> 
         </div> 
        </form> 
         </div> 
        </div> 
       </div> 
       <!-- /.col --> 
       </div> 
       <!-- /.row --> 
      </div> 
      <!-- /.box-body --> 
     </div> 
      <!--/.box-body --> 
     </div> 



    {% include "../../partials/flash.html" %} 


    </div> 
</div> 

{% endblock %} 

Dann mein JS-Code ist:

function typePicker(){ 
    var sel=document.getElementById("type"); 
    var typeInputs=document.getElementById("typeInputs"); 
    var aps = '<div class="form-group"><input type="text" class="form-control" name="ipaddress" id="ipaddress" placeholder="IP Address"></div>   <!-- IP Address --><div class="form-group"><input type="text" class="form-control" name="mac-address" id="mac-address" placeholder="MAC Address"></div><!-- MAC Address --><div class="form-group"><input type="text" class="form-control" name="range" id="range" placeholder="Range in M"></div><!-- Range --><div class="form-group"><input type="text" class="textbox-n form-control" name="bands" id="bands" placeholder="Bands" ></div><!-- Bands --><div class="form-group"><input type="text" class="form-control" name="channels" id="channels" placeholder="Channel(s)"></div><!-- Channels --><div class="form-group"><input placeholder="Date Bought" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="date-bought" name="dateBought"></div><!-- Date Bought --><div class="btn-group" data-toggle="buttons"><label for="">PoE</label><br><label class="btn btn-primary"><input type="radio" name="poe" id="option1"> Yes</label><label class="btn btn-primary"><input type="radio" name="poe" id="option2"> No</label></div> <br><br><!-- PoE --><div class="form-group"><input placeholder="Warranty Expiration Date" class="textbox-n form-control" type="text" onfocus="(this.type="date")" onblur="(this.type="text")" id="warranty-date" name="warrantyDate"></div><!-- Warranty Date --><div class="form-group"><input class="form-control" id="location" placeholder="Location"></div><!-- Location --></div>'; 

    if(sel.value=="aps"){ 
     typeInputs.innerHTML=aps; 
    } 

    if(sel.value!="other"){ 
     var child = document.getElementById("typeInputs"); 
     child.parentNode.removeChild(child); 
    } 
} 

Ich weiß, ich verwirrte die HTML im JS-Code, aber ich kann nicht einmal an der Arbeit . Grund, warum ich den vollen HTML-Code, den ich brauche, eingefügt habe, ist, dass ich hoffe, dass jemand einen besseren Weg kennt, dies zu kodieren, so dass ich nicht benötigte divs und dergleichen nicht habe.

Wenn mir irgendein Code oder Details fehlen, frage ich, werde ich diese Frage genau beobachten, bis ich es zur Arbeit bekomme.

Ich würde auch gerne die HTML verschwinden ändern, wenn der Benutzer einen anderen Wert wählt, so dass nur die HTML für diesen Wert tatsächlich angezeigt wird.

Answer 1

Die bewährte Methode besteht darin, Ereignisse zu verwenden.

reine JS:

var foo = document.getElementById("type"); 
foo.addEventListener("change",function(){ 
    ... 
    Do whatever 
    ... 

}); 

Mit jQuery:

$('#type').change(function(){ 
    .... 
    Do whatever 
    .... 
})