web-dev-qa-db-ja.com

ブートストラップでタイトルを表示-空の要素なしで選択

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

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

これが私の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つ目はドロップダウンメニューで奇妙に見える空白スペースがあります。

screenshot

<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>
jqueryhtmlcsstwitter-bootstrapbootstrap-select
7
KyleMit

方法1-ブートストラップの更新-バージョン> 1.7を選択

バージョン1.7. のリリースノートによると：

＃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>
12
KyleMit

もう1つのオプションは、複数選択ドロップダウンに設定することですが、選択されたアイテムの数を1に制限します。

<select class="selectpicker" multiple data-max-options="1" title="Pick One">
  <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.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" multiple data-max-options="1" title="Pick One">
  <option>Mustard</option>
  <option>Ketchup</option>
  <option>Relish</option>
</select>
3
Nikhil Arora

JSバージョン：

$('.selectpicker').selectpicker().each(function () {
    if (this.nodeName == "DIV") {
        $(this).find('ul.dropdown-menu li:first').css('display', 'none');
    }
});
0
pamo

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>

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

0
Daniel Duarte