使用 jQuery 在 Bootstrap 的 SelectPicker 中搜索文本

Question

我想在下拉列表中搜索文本并设置它 select由 text.Here 编辑是我的控制

HTML：

  <select class="form-control input-sm selectpicker" id="area_location_id">
        <option value="" selected="">Select</option>
        <option value="17">Al Barsha</option>
       <option value="82">Al Furjan</option>
      <option value="4924">Al Garhoud</option>
      <option value="5787">Al Jadaf</option>
     <option value="5684">Al Mamzar</option
    </select>

Jquery:

 var mytxt = "Al Furjan";
("#area_location_id").find("option:contains('" + mytxt  + "')").each(function () {
    $(this).attr("selected", "selected");
});
$('#area_location_id').selectpicker('refresh');
$('#area_location_id').selectpicker('val', mytxt );

我正在使用 bootstrap select选择器。我可以在此代码中使用 contain: 还是 selectpicker 有自己的方法？

更新：

我尝试使用简单的 select 控件，它正在工作...这是 Fiddle

Answer 1

对于同样情况需要解决方案的人，我在这里解决了

var userToSearchFor = "Jadaf";
$("#area_location_id").find("option:contains('" + userToSearchFor +"')")
.each(function ()   {
 $(this).attr("selected", "selected");
});

$('#area_location_id').selectpicker('val', userToSearchFor );
$('#area_location_id').selectpicker('refresh');

Answer 2

下面的答案稍作改动。

var userToSearchFor = "text to search";
var selectedID;
$("#area_location_id").find("option:contains('" + userToSearchFor +"')")
    .each(function ()   {
        $(this).attr("selected", "selected");
        selectedID = $(this).val();
});

$('#area_location_id').selectpicker('val', selectedID );
$('#area_location_id').selectpicker('refresh');

注意 selectpickers 值不能被 attr("selected", true) 也可以通过选项值而不是 select 文本设置 val。

使用 jQuery 在 Bootstrap 的 SelectPicker 中搜索文本

Search text in Bootstrap's SelectPicker using jQuery

jquery

twitter-bootstrap

bootstrap-select