如何使用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>

A.
B
C
D
E
请选择

我要做的是，当我从下拉列表中选择

B

时，我的面板会折叠，否则不会

---

但是我不知道如何使用javascript来实现这一点，您基本上必须在select标记上侦听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标记上的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';
  }
}

及

---

希望这有帮助。

试试这个内部文档。准备好了吗

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

---

试试这个内部文档。准备好了吗

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