回答:
はい、オプションで単に「無効に選択」されています。
<select>
<option value="" selected disabled>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
答えは、
disabled selected hidden
か、hidden
すべてが正しいです。:)
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から表示プロパティを削除します
非表示の属性を追加:
<select>
<option value="" selected disabled hidden>Please select</option>
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
このすべてのオプションは....即興です。ブートストラップはすでにこのためのソリューションを提供しています。すべてのドロップダウン要素のプレースホルダーを変更する場合は、次の値を変更できます
ブートストラップファイルの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>
bootstrap-select.js
検索しtitle: null,
て、これを削除します。title="YOUR TEXT"
し<select>
ます。例:
<select title="Please Choose one item">
<option value="">A</option>
<option value="">B</option>
<option value="">C</option>
</select>
ユーザーが選択する最初のオプションを無効にするクラスと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>
これにより、ドロップダウンの最初のオプションがプレースホルダーになり、ユーザーは最初のオプションを選択できなくなります。
それが役に立てば幸い!!
ここにそれを行う別の方法があります
<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つを選択する必要があります。
フィールド名やラベルを使用したくない場合に非常に便利です。
ブートストラップ選択にはnoneSelectedText
オプションがあります。data-none-selected-text
属性で設定できます。
ドキュメンテーション。
以下のための.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>
ブートストラップを使用して、フィルターまたはその他のものに使用するオプションにいくつかの値を追加する必要がある場合は、プレースホルダーとして必要なオプションにクラス「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
属性に追加します。
選択の上にラベルを作成します
<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
オプションを選択すると非表示になるラベルをクリックすると、選択を表示できます。