如何在自举选择器插件上使用id设置所选值

Question

我正在测试引导程序的选择器插件，如：

<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值选择option的正确方法。

Answer 1

如果您所要做的只是选择#p03选项，那么$('#p03').prop('selected', true);应该可以工作(而不是$('#preffrom').val('p03');)。下面是一个有用的示例：https://jsfiddle.net/kwm9rsee/