2017-06-14 6 views
0

私は、ドロップダウンを持っている: - 私は私のパネルは、他ではない崩壊しますドロップダウンからBを選択したときに私は何をしようとしていることであるはjavascriptを

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

しかし、私はjavascriptの

答えて

1

でそれを行う方法をあなたは基本的にselectタグにonChangeイベントをリッスンしなければならないことを確認していません。その値が 'B'の場合は、DOMの別の部分を折りたたむなど、特別な動作を実装します。

EDIT:

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)"> 

は、この情報がお役に立てば幸いです。

2

$("#IDSelector").change(function() { 
    if($("#IDSelector").val() == "B"){ 
     $('.collapse').collapse('hide'); 
    } 
    else{ 
      $('.collapse').collapse('show'); 
    } 
    }); 
document.readyこの内部を試してみてください