我正在尝试根据选择值插入一些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。
答案 0 :(得分：0)
良好的做法是使用活动。
Pure JS：
var foo = document.getElementById("type");
foo.addEventListener("change",function(){
...
Do whatever
...
});
使用jQuery：
$('#type').change(function(){
....
Do whatever
....
})