如何通过在 bootstrap 的 selectpicker 插件上使用 id 来设置选定值

Question

我正在像这样测试 bootstrap 的 selectpicker 插件：

HTML

<select class="selectpicker form-control" id="preffrom">
  <optgroup label="北海道" class="area-hokkaido">
    <option id="p01">北海道</option>
  </optgroup>
  <optgroup label="東北" class="area-tohoku">
    <option id="p02">青森県</option>
    <option id="p03">岩手県</option>
    ...
    <option id="p07">福島県</option>
  </optgroup>
  ...
  <optgroup label="沖縄" class="area-okinawa">
    <option id="p47">沖縄県</option>
  </optgroup>
</select>

JavaScript

$(function(){
  $('.selectpicker').selectpicker();
  // this event is for test  but it does not work...
  $('#test').bind('click', function(e){
    $('#preffrom').val('p03');
    $('#preffrom').selectpicker('refresh');
  });
});

我引用了这个： How to set selected value on select using selectpicker plugin from bootstrap

但是没有任何反应。请告诉我使用 id 值 select 和 option 的正确方法。

Answer 1

如果您只是选择了#p03 选项，那么 $('#p03').prop('selected', true); 应该可以工作（而不是 $('#preffrom').val('p03');）。这是一个工作示例：https://jsfiddle.net/kwm9rsee/

如何通过在 bootstrap 的 selectpicker 插件上使用 id 来设置选定值

How to set a selected value by using id on selectpicker plugin from bootstrap

javascript

jquery

twitter-bootstrap

bootstrap-select