9

Bootstrap-Selectで、最初に選択したアイテムがタイトルに表示されないようにするにはどうすればよいですか。または、ドロップダウンオプションのリストから空の最初の項目を非表示にするにはどうすればよいですか

HTML では、要素はデフォルト<select>で最初の要素を自動的に選択<option>します。これを回避する一般的な方法は、空白の最初の行を作成することですが、ブートストラップ選択によって公開されるドロップダウン メニューの一部として、これはかなり奇妙に見えます。

ここに私の2つのオプションがあります：

<select class="selectpicker" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" title="Pick One">
  <option></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

しかし、どちらもあまり良く見えません。1 つ目はプロパティを完全に無視しtitle、2 つ目はドロップダウン メニューで奇妙に見える空白スペースがあります。

スクリーンショット

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.js"></script>

<select class="selectpicker" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

<select class="selectpicker" title="Pick One">
  <option></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

4

4 に答える 4

13

方法 1 - Bootstrap-Select バージョン >1.7 を更新する

バージョン 1.7.0のリリース ノートによると:

#888 , #738 : 非複数選択を使用する場合に「タイトル」を表示する 空のオプションが選択の先頭に追加され、デフォルトで選択されます。これにより、選択が最初にロードされ、「いいえ」オプションがまだ選択されているときにタイトルを表示できます。

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

スタック スニペットを使用したデモ:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

<select class="selectpicker" >
  <option data-hidden="true">Pick One</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

方法 2 - CSS で空のオプションを非表示にする

このように、ドロップダウン メニューの最初の<li>要素を非表示にすることができます (ただし、デフォルトでは発生しないように、クラスに基づいてそれを作成する必要があります)。

.bootstrap-select ul.dropdown-menu li:first-child {
    display: none;
}

スタック スニペットを使用したデモ:

.bootstrap-select ul.dropdown-menu li:first-child {
    display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

<select class="selectpicker" title="Pick One" >
  <option></option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

方法 3 - データ属性で空のオプションを非表示にする

@Antiga で提案されているように、次のdata-hidden="true"ように最初のオプションを非表示にできます。

<select class="selectpicker">
  <option data-hidden="true">Pick One</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

スタック スニペットを使用したデモ:

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/css/bootstrap-select.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.7.0/js/bootstrap-select.js"></script>

<select class="selectpicker" >
  <option data-hidden="true">Pick One</option>
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>

于 2014-12-31T16:51:50.030 に答える
0

JS バージョン:

$('.selectpicker').selectpicker().each(function () {
    if (this.nodeName == "DIV") {
        $(this).find('ul.dropdown-menu li:first').css('display', 'none');
    }
});
于 2016-04-12T19:34:07.537 に答える
0

select 要素から属性 title を削除し、最初のオプションが空であることを確認してください:

<div class="form-group">
  <select class="selectpicker form-control">
    <option value=""></option>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
  </select>
</div>

(ブートストラップを最大限に活用したい場合は、私の例にある要素とクラスを追加することを検討してください)。

于 2016-05-31T11:44:26.953 に答える