如何在Bootstrap 3的SelectedIndex中顯示/隱藏Div？

Question

我有這樣的代碼：

<div class="form-group"> 
    <label for="slDisThrough" class="col-sm-1 control-label">Distributed Through</label> 
    <div class="col-sm-11"> 
     <select name="slDisThrough" id="slDisThrough" class="form-control"> 
      <option value="0">-Select-</option> 
      <option value="1">Agent</option> 
      <option value="2">Retail</option> 
     </select> 
    </div> 
</div> 
<div id="slAgentID" class="hide"> 
    <div class="form-group"> 
     <label for="slAgent" class="col-sm-1 control-label">Agent</label> 
     <div class="col-sm-11"> 
      <select name="slAgent" class="form-control"> 
       <option value="0">-Select-</option> 
       <option value="1">Show</option> 
       <option value="2">Hide</option> 
      </select> 
     </div> 
    </div> 
</div> 
<div id="slRetailID" class="hide"> 
    <div class="form-group"> 
     <label for="slRetail" class="col-sm-1 control-label">Retail</label> 
     <div class="col-sm-11"> 
      <select name="slRetail" class="form-control"> 
       <option value="0">-Select-</option> 
       <option value="1">Hide</option> 
       <option value="2">Show</option> 
      </select> 
     </div> 
    </div> 
</div> 

Check this Fiddle

if(document.getElementById("slDisThrough").selectedIndex == 1) { 
    document.getElementById("slAgentID").style.display = ""; } 
    else { document.getElementById("slAgentID").style.display = "none"; } 
if(document.getElementById("slDisThrough").selectedIndex == 2) { 
    document.getElementById("slRetail").style.display = ""; } 
    else { document.getElementById("slRetail").style.display = "none"; } 

我需要顯示/隱藏在選定值的DIV，我以前用它使用JavaScript，但堅持了引導。

Answer 1

由於加載了jQuery，更好地使用這樣的：

$('#slDisThrough').on('change', function(){  
    if ($(this).val() == 1) { 
     $('#slAgentID').removeClass('hide'); 
     $('#slRetailID').addClass('hide');  
    } 

    if ($(this).val() == 2) { 
     $('#slAgentID').addClass('hide'); 
     $('#slRetailID').removeClass('hide');   
    } 
}) 

的jsfiddle here