Verbergen dann zeigt HTML basierend auf Wert auswählen

Question

Ich versuche, HTML-Inhalt basierend auf einem ausgewählten Wert zu zeigen. Wenn etwas anderes als cables ausgewählt ist, möchte ich Manufacturer und Model anzeigen, aber wenn Kabel ausgewählt ist, möchte ich diese zwei Eingänge nicht anzeigen. Ich möchte, damit ich cables auswählen kann, wenn ich aps auswähle, dass es diese zwei Felder zurückbringt. Was ist die beste/geeignetste Methode, dies zu tun? Code-Snippet, um zu zeigen, was ich bekomme. Ich habe der Einfachheit halber viele Optionen entfernt.

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

für ausblenden:

_element.style.display = 'none'; 

für die Show:

_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>