如何使用使用特定值引导崩溃的JavaScript

Question

我有一个下拉菜单： -

<select class="form-control" id="IDSelector"> 
    <option>A</option> 
    <option>B</option> 
    <option>C</option> 
    <option>D</option> 
    <option>E</option> 
</select>     

    <div class="panel-group"> 
     <div class="panel panel-default"> 
     <div class="panel-heading"> 
      <h4 class="panel-title"> 
      <input type="checkbox" id="select" data-toggle="collapse" data-target="#collapse1"> Please Select 
      </h4> 
     </div> 
     <div id="collapse1" class="panel-collapse collapse"> 
      <div class="panel-body"> 
      </div> 
      <div class="panel-footer"> 

      </div> 
     </div> 
     </div> 
    </div> 

，当我从下拉菜单中我得到小组其他倒塌没有选择B我所试图做的是。

但我不知道如何使用JavaScript

Answer 1

你基本上要听上的选择标签onChange事件做到这一点。如果它的值是'B'，那么你实现你的特殊行为（如折叠DOM的另一部分）。

编辑：

function handleChange(event) { 
    var panGroup = document.querySelector('.panel-group'); 

    //This code hides or displays the panel but you can do whatever you like. 
    if(event.target.value === 'B') { 
    panGroup.style.display = 'none'; 
    } else { 
    panGroup.style.display = 'block'; 
    } 
} 

而且

<select class="form-control" id="IDSelector" onchange="handleChange(event)"> 

希望这有助于。

Answer 2

试试这个里面的document.ready

$("#IDSelector").change(function() { 
    if($("#IDSelector").val() == "B"){ 
     $('.collapse').collapse('hide'); 
    } 
    else{ 
      $('.collapse').collapse('show'); 
    } 
    });