選択値に基づいてhtmlを追加する

Question

選択値に基づいてHTMLを挿入しようとしていますが、12値を設定し、それぞれの値に基づいて異なるHTMLを挿入する予定です。私は前にこのコードを使用していましたが、これまでのコードを使用していました。

私のHTMLコードは次のとおりです。

{% 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 %} 

その後、私のJSコードは次のとおりです。

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); 
    } 
} 

私はJSコードでHTMLを台無しに知っているが、私も仕事にいずれかを取得することはできません。私が挿入する必要がある完全なhtmlが含まれている理由は、誰かがこれをコーディングするより良い方法を知っていて、必要のないdivを持っていないことを期待しているからです。

コードや詳細を忘れてしまった場合は、私が動作させるまでこの質問をよく見ていきます。

ユーザーが別の値を選択したときにhtmlが消えるようにしたい場合は、その値のhtmlだけが実際に表示するようにします。

Answer 1

イベントを使用することをお勧めします。

ピュアJS：

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

}); 

jQueryの使用：

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