如何通過引導程序在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');
  });
});

我引用了這一點： 如何使用引導程序中的selectpicker插件在select上設置選定值

但是什么也沒發生。 請告訴我使用id值選擇option正確方法。

Answer 1

如果您只想選擇＃p03選項，則$('#p03').prop('selected', true); 應該可以工作（而不是$('#preffrom').val('p03'); ）。 這是一個工作示例： https : //jsfiddle.net/kwm9rsee/