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

【问题标题】：Hiding then showing HTML based off select value隐藏然后显示基于选择值的 HTML
【发布时间】：2017-10-15 23:41:28
【问题描述】：

我正在尝试根据选择值显示 html 内容。 When anything other than cables is selected I want to show Manufacturer and Model but when cables is selected I want to not show those two inputs.我想这样我可以选择 cables 然后当我选择 aps 时，它将把这两个字段带回来。最好/最合适的方法是什么？代码 sn-p 显示我得到了什么。为了简单起见，我删除了很多选项。

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>

【问题讨论】：

标签： javascript jquery html

【解决方案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>

【讨论】：

哇，感谢您的快速回复/回答以及它的工作代码 sn-p。非常感激。我将尝试实现这一点，看看是否可以让它为我工作。