ブートストラップ選択ドロップダウンリストのプレースホルダー


104

プレースホルダーを含むドロップダウンリストを作成しようとしています。placeholder="stuff"他のフォームのようにサポートしていないようです。ドロップダウンでプレースホルダーを取得する別の方法はありますか?

回答:


225

はい、オプションで単に「無効に選択」されています。

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

フィドルへのリンク

答えは、

https://stackoverflow.com/a/5859221/1225125


4
ブートストラップの組み込みソリューションを求めているため、これは質問に答えません
Mehdi

5
また、あなたは使用することができますdisabled selected hiddenか、hiddenすべてが正しいです。:)
MD Ashik

60

非表示を使用:

<select>
    <option hidden >Display but don't show in list</option>
    <option> text 1 </option>
    <option> text 2 </option>
    <option> text 3 </option>
</select>

v-modelを使用するときは、これを使用する必要がある最後のコメントを続行します。<option:value = "null" disabled hidden> Select Age </ option>
Homer

16

HTMLではサポートされていないため、ドロップダウンまたは選択にはプレースホルダーがありませんが、他の入力プレースホルダーと同じように見えるように同じ効果を作成することは可能です

    $('select').change(function() {
     if ($(this).children('option:first-child').is(':selected')) {
       $(this).addClass('placeholder');
     } else {
      $(this).removeClass('placeholder');
     }
    });
.placeholder{color: grey;}
select option:first-child{color: grey; display: none;}
select option{color: #555;} // bootstrap default color
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="form-control placeholder">
   <option value="">Your Placeholder Text</option>
   <option value="1">Text 1</option>
   <option value="2">Text 2</option>
   <option value="3">Text 3</option>
</select>

リストの最初のオプションを表示したい場合は、cssから表示プロパティを削除します


8
「選択された無効」クラスを追加するのと同じことで、大量のカスタムコードを記述しました。
Jordan.JD 2014

2
彼の功績として、彼はもう少し視覚的に完全であり(コードが多い)、プレースホルダーはリスト選択内でレンダリングされません。私は物事の最小限のコードの方法に行くつもりですが。
Roadkillnz、2014

8

JavaScriptを使用して選択フィールドを初期化する場合は、次のコードを追加して、デフォルトのプレースホルダーテキストを置き換えることができます。

noneSelectedText: 'Insert Placeholder text'

例:ある場合:

<select class='picker'></select>

あなたのJavaScriptでは、あなたはこのようにselectpickerを初期化します

$('.picker').selectpicker({noneSelectedText: 'Insert Placeholder text'});  

6

ほとんどのオプションは、複数選択には問題があります。Title属性を配置し、最初のオプションをdata-hidden = "true"にします

<select class="selectpicker" title="Some placeholder text...">
    <option data-hidden="true"></option>
    <option>First</option>
    <option>Second</option>
</select>

5

非表示の属性を追加:

<select>
    <option value="" selected disabled hidden>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>


1
これは私にとって最も効果的でした。選択されているということは、デフォルトで選択されていて、無効になっているためクリックできず、ドロップダウンから非表示になっているからです。非表示が使用されている場合、無効になっている必要はおそらくないでしょう。
aspergillusOryzae

4

これを試して:

<select class="form-control" required>
<option value="" selected hidden>Select...</option>

使用しているときrequired+のvalue=""ユーザーが使用してそれを選択することはできませんhidden、ユーザーがオプションボックスを開いたとき、それがオプションリストから隠さようになります


強くお勧めします!
アクア4 4


2

このすべてのオプションは....即興です。ブートストラップはすでにこのためのソリューションを提供しています。すべてのドロップダウン要素のプレースホルダーを変更する場合は、次の値を変更できます

ブートストラップファイルのnoneSelectedText。

個別に変更するには、TITLEパラメータを使用できます。

例:

<div class="form-group">
          <label class="control-label col-xs-2" id="country">Continent:</label>
          <div class="col-xs-9">
            <select name="zones[]" class="selectpicker" title="All continents" id="zones" multiple >
              <option value="Africa">Africa</option>
              <option value="Asia">Asia</option>
              <option value="North America">America North</option>
              <option value="South America">America South</option>
              <option value="Antarctica">Antarctica</option>
              <option value="Australia">Australia</option>
              <option value="Europe">Europe</option>
            </select>
          </div>
        </div>

あなたはちょうど私を救いました。上記のすべてのオプションが複数選択に対して機能していませんでした。選択は以前の値の選択を解除していなかったため。タイトルは私のために働いた
ファランカーン

1
  1. bootstrap-select.js検索しtitle: null, て、これを削除します。
  2. 要素を追加title="YOUR TEXT"<select>ます。
  3. 罰金:)

例:

<select title="Please Choose one item">
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

1

ユーザーが選択する最初のオプションを無効にするクラスとJQueryコードを含むドロップダウンボックスは、選択ボックスプレースホルダーとして完全に機能すると思います。

<select class="selectboxclass">
   <option value="">- Please Select -</option>
   <option value="IN">India</option>
   <option value="US">America</option>
</select>

JQueryによって最初のオプションを無効にします。

<script>
$('select.selectboxclass option:first').attr('disabled', true);
</script>

これにより、ドロップダウンの最初のオプションがプレースホルダーになり、ユーザーは最初のオプションを選択できなくなります。

それが役に立てば幸い!!


0

ここにそれを行う別の方法があります

<select name="GROUPINGS[xxxxxx]" style="width: 60%;" required>
    <option value="">Choose Platform</option>
<option value="iOS">iOS</option>
    <option value="Android">Android</option>
    <option value="Windows">Windows</option>
</select>

「プラットフォームの選択」がプレースホルダーになり、「必須」プロパティにより、ユーザーはオプションの1つを選択する必要があります。

フィールド名やラベルを使用したくない場合に非常に便利です。


0

ブートストラップを使用して、これはあなたができることです。クラス「text-hide」を使用すると、無効化されたオプションは最初は表示されますが、リストには表示されません。

<select class="form-control" >
  <option selected disabled class="text-hide">Title</option>
  <option>A</option>
  <option>B</option>
  <option>C</option>
</select>


0

以下のための.htmlページ

<select>
    <option value="" selected disabled>Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

for .jspまたはその他のサーブレットページ。

<select>
    <option value="" selected="true" disabled="true">Please select</option>
    <option value="">A</option>
    <option value="">B</option>
    <option value="">C</option>
</select>

0

ブートストラップを使用して、フィルターまたはその他のものに使用するオプションにいくつかの値を追加する必要がある場合は、プレースホルダーとして必要なオプションにクラス「bs-title-option」を追加するだけです。

<select class="form-group">
   <option class="bs-title-option" value="myVal">My PlaceHolder</option>
   <option>A</option>
   <option>B</option>
   <option>c</option>
</select>

ブートストラップは、このクラスをtitle属性に追加します。


0

Angular 2のソリューション

選択の上にラベルを作成します

<label class="hidden-label" for="IsActive"
    *ngIf="filterIsActive == undefined">Placeholder text</label>
<select class="form-control form-control-sm" type="text" name="filterIsActive"
    [(ngModel)]="filterIsActive" id="IsActive">
    <option value="true">true</option>
    <option value="false">false</option>
</select>

そしてCSSを適用して上に配置します

.hidden-label {
    position: absolute;
    margin-top: .34rem;
    margin-left: .56rem;
    font-style: italic;
    pointer-events: none;
}

pointer-events: none オプションを選択すると非表示になるラベルをクリックすると、選択を表示できます。


0
<option value="" defaultValue disabled> Something </option>

あなたは置き換えることができdefaultValueselectedそれは警告を与えるだろう。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.