Question

我正在使用select＆amp; selectpicker-plugin用于状态和位置值。状态值在选择选项中正确加载，在选择更改时，应显示选择选择器值（位置）。在网页上，地方值不可见，当我用浏览器调试元素检查时，我可以看到加载的地方值。它在网页上不可见的原因是什么？

当我从课程中删除selectpicker时，

  <select class="form-control" id="selectplaces">
  </select>

我可以在网页上看到值已加载并可见

Answer 1

在加载新值（地点）后，您可能没有使用.selectpicker('refresh')方法刷新bootstrap-selectpicker元素。

这是一个连接在一起的两个bootstrap-selectpicker的片段：

$('#selectstates').on('changed.bs.select', function(e) {
  var v = $(e.target).val();
  console.log("selected value:", v);
  switch (v) {
    case "us":
      addOptions('#selectplaces', ['New Jork', 'Chicago']);
      break;
    case "it":
      addOptions('#selectplaces', ['Rome', 'Venice']);
      break;
    case "de":
      addOptions('#selectplaces', ['Berlin', 'Hamburg']);
      break;
    default:
      $('#selectplaces').selectpicker('val', []);
  }
});

function addOptions(id, arr) {
  $(id).empty();
  var opt = $('<option data-hidden="true">select a place...</option>');
  $(id).append(opt);
  for (var i in arr) {
    opt = $("<option/>").val(arr[i]).html(arr[i]);
    $(id).append(opt);
  }
  $(id).selectpicker('refresh');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/js/bootstrap-select.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.4/css/bootstrap-select.min.css" rel="stylesheet" />

<label>States:</label>
<select class="selectpicker" id="selectstates">
  <option data-hidden="true">select a state...</option>
  <option value="us">USA</option>
  <option value="it">Italy</option>
  <option value="de">Germany</option>
</select>
<br>
<br>
<label>Places:</label>
<select class="selectpicker" id="selectplaces">
</select>

选择选择器不能使用简单的html选择？

1 个答案: