选择选择器不适用于简单的 html 选择？答案

【问题标题】：Select picker is not working with simple html select?选择选择器不适用于简单的 html 选择？
【发布时间】：2018-01-03 07:13:39
【问题描述】：

我正在使用 select & selectpicker-plugin 来获取状态和位置值。状态值在选择选项中正确加载，并且在选择更改时应显示选择选择器值（位置）。在网页上，位置值不可见，当我检查浏览器调试元素时，我可以看到位置值已加载。网页上看不到是什么原因？

当我从课堂上删除 selectpicker 时，

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

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

【问题讨论】：

需要现场示例！
开发者控制台有错误吗？
@Mr. X，我使用 MYSQL 作为数据库时如何创建实时示例
@Prateik Darji，代码没有错误。
通过模拟你的代码，去jsfiddle.net添加一个带有静态数据的select option，并包含你使用的那些插件cdn并在这里分享。就是这样！

标签： jquery bootstrap-selectpicker

【解决方案1】：

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

这是一个带有两个 bootstrap-selectpicker 连接在一起的 sn-p：

$('#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>

【讨论】：