web-dev-qa-db-ja.com

HTMLの選択（ドロップダウン）メニューで選択できないデフォルトの説明を設定するにはどうすればよいですか？

ユーザーが言語を選択するドロップダウンがあります：

<select>
    <option>English</option>
    <option>Spanish</option>
</select>
  1. 最初に表示されるデフォルトのオプションで、「英語」の代わりに「言語を選択」と言います（デフォルトで表示される最初のオプション）。
  2. ユーザーに「言語の選択」を選択させたくありません。
htmlhtml-select
33
RSM

選択内のどのオプションにもselected属性がない場合、最初のオプションが選択されます。

最初ではないデフォルトオプションを選択するには、そのオプションにselected属性を追加します。

<option selected="selected">Select a language</option>

Select要素のデフォルトに関する HTML 4.01仕様 を読むことができます。

このようなHTMLの基本を学ぶ必要がある場合は、良いHTMLブックを読むことをお勧めします- Head First HTML をお勧めします。

45
Oded

Odedの答えに基づいて、デフォルトオプションを設定することもできますが、それが単なるダミーテキストである場合は、選択可能なオプションにすることはできません。たとえば、次のことができます。

<option selected="selected" disabled="disabled">Select a language</option>

これにより、ユーザーが選択ボックスをクリックする前に「言語を選択」が表示されますが、無効な属性のため、ユーザーは選択できません。

55
Glen Selle
.selectmenu{
  
        -webkit-appearance: none;  /*Removes default chrome and safari style*/
        -moz-appearance: none; /* Removes Default Firefox style*/
        background: #0088cc ;
        width: 200px; /*Width of select dropdown to give space for arrow image*/
        text-indent: 0.01px; /* Removes default arrow from firefox*/
        text-overflow: "";  /*Removes default arrow from firefox*/ /*My custom style for fonts*/
        color: #FFF;
        border-radius: 2px;
        padding: 5px;
    border:0 !important;
        box-shadow: inset 0 0 5px rgba(000,000,000, 0.5);
}
.hideoption { display:none; visibility:hidden; height:0; font-size:0; }
Try this html

<select class="selectmenu">
<option selected disabled class="hideoption">Select language</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
5
Ashok

オプション＃1言語を選択するだけです：

ライブデモ

3
Myles Gray

この質問には受け入れられた答えがありますが、これは望ましい出力を達成するためのはるかにクリーンな方法だと思います

<select required>
<option value="">Select</option>
<option>English</option>
<option>Spanish</option>
</select>

必須属性では、リストからオプションを選択することが必須になります。

value = "" selectタグ内の必須属性と組み合わされたoptionタグ内では、 'Select'オプションの選択が許可されないため、必要な出力

0
Ketan R
<option value="" selected disabled hidden>Default Text</option>

無効なフラグを残しておくと、オプションを選択できなくなり、非表示のフラグによってリストから削除されます。私の場合、列挙リストでも使用していましたが、概念は同じです

<select asp-for="Property" asp-items="Html.GetEnumSelectList<PropertyEnum>()">
                        <option value="" selected disabled hidden>Select Property Enum</option>
                        <option value=""></option>
                    </select>
0
Chris

プロンプトを1番目のoptionに入れて無効にします：

<selection>
    <option disabled selected>”Select a language”</option>
    <option>English</option>
    <option>Spanish</option>
</selection>

最初のオプションは自動的に選択されたデフォルト（ドロップダウンを見たときに最初に表示されるもの）になりますが、selected属性の追加はより明確で、最初のフィールドが無効フィールドの場合に実際に必要です。

disabled属性は、オプションを選択不可/グレー表示にします。

他の回答ではdisabled=“disabled”を設定することをお勧めしますが、これは基本的にHTMLのより厳密なバージョンであるXHTMLとして解析する必要がある場合にのみ必要です。 disabledがオンであれば、標準HTMLには十分です。

I 選択を「必須」にしたい場合（「言語の選択」オプションを受け入れられた回答として受け入れない場合）：

required属性をselectionに追加し、最初のoptionのvalueを空の文字列””に設定します。

<selection required>
    <option disabled value=“”>Select a language</option>
    <option>English</option>
    <option>Spanish</option>
</selection>
0
JBallin