隐藏然后显示基于选择值的 HTML

Question

我正在尝试根据选择值显示html内容。当选择除cables以外的任何内容时，我想显示Manufacturer和Model但是当选择电缆时，我不想显示这两个输入。我想这样我就可以选择cables然后当我选择aps时，它将带回这两个字段。这样做的最佳/最合适的方法是什么？代码片段来显示我得到的内容。为了简单起见，我删除了很多选项。

var sel=document.getElementById("type");
var manufacturer=document.getElementById("manufacturer");
var model=document.getElementById("model");
var typeInputs=document.getElementById("typeInputs");
var aps = '<h1>aps</h1>';
var cables = '<h1>cables</h1>';
function typePicker(){
if(sel.value=="aps"){
 typeInputs.innerHTML=aps;
}
if(sel.value=="cables"){
  manufacturer.innerHTML= "";
  model.innerHTML= "";
  typeInputs.innerHTML=cables;
}
};

<div class="form-group" id="manufacturer">
  <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" id="model">
  <label for="model" class="control-label">Model Name</label>
  <input type="text" class="form-control" id="model" name="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="other">Other</option>
    <option value="aps">Access Point</option>
    <option value="cables">Cable</option>
    <option value="desktops">Desktop</option>
  </select>
</div>
                            
<div class="form-group" id="typeInputs">
                                
</div>

Answer 1

表示隐藏：

_element.style.display = 'none';

用于显示：

_element.style.display = 'block';

var sel=document.getElementById("type");
var manufacturer=document.getElementById("manufacturer");
var model=document.getElementById("model");
var typeInputs=document.getElementById("typeInputs");
var aps = '<h1>aps</h1>';
var cables = '<h1>cables</h1>';
function typePicker(){
if(sel.value=="aps"){
  typeInputs.innerHTML=aps;
}
if(sel.value=="cables"){
  manufacturer.style.display = 'none';
  model.style.display = 'none';
  typeInputs.innerHTML=cables;
}else{
  manufacturer.style.display = 'block';
  model.style.display = 'block';
}
};

<div class="form-group" id="manufacturer">
  <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" id="model">
  <label for="model" class="control-label">Model Name</label>
  <input type="text" class="form-control" id="model" name="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="other">Other</option>
    <option value="aps">Access Point</option>
    <option value="cables">Cable</option>
    <option value="desktops">Desktop</option>
  </select>
</div>
                            
<div class="form-group" id="typeInputs">
                                
</div>