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

在document.ready

中试试这个

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

Answer 2

你基本上必须在select标签上监听onChange事件。如果它的值是＆＃39; B＆＃39;，那么你实现了你的特殊行为（比如折叠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)">

希望这有帮助。

如何使用javascript将bootstrap折叠用于特定值

2 个答案: