jquery - bootstrap-select 下拉菜单使其适用于移动设备

Question

我对此感到非常困难。有人可以帮忙吗？

我希望为移动设备启用 native 下拉菜单

1. http://jsfiddle.net/4UjVr/4/

2. 文档:http://silviomoreto.github.io/bootstrap-select/#mobile

$(function() {
  $('#desktop').selectpicker({
    container: 'body'
  });
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/120557/Expires/12-2014/bootstrap-select.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet" />


<select id="desktop" data-live-search="true">
  <option>cow</option>
  <option>bull</option>
  <option>cow</option>
  <option>Test2</option>
  <option>Tes3</option>
  <option>Tes4</option>

  <option class="get-class" disabled>ox</option>
  <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
  </optgroup>
</select>

我希望为移动设备启用 native 下拉菜单

Answer 1

这似乎可以解决问题。

$(function () {
$('#desktop').selectpicker({
    container: 'body'   
});

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    $('#desktop').selectpicker('mobile');
}
});

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<script src="https://dl.dropboxusercontent.com/u/120557/Expires/12-2014/bootstrap-select.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.5.4/bootstrap-select.min.css" rel="stylesheet" />


<select id="desktop" data-live-search="true">
  <option>cow</option>
  <option>bull</option>
  <option>cow</option>
  <option>Test2</option>
  <option>Tes3</option>
  <option>Tes4</option>

  <option class="get-class" disabled>ox</option>
  <optgroup label="test" data-subtext="another test" data-icon="icon-ok">
    <option>ASD</option>
    <option>Bla</option>
    <option>Ble</option>
  </optgroup>
</select>