2011-03-06 212 views
31

我有一個下拉其中用戶選擇的語言:如何在HTML中的選擇(下拉)菜單中設置不可選擇的默認描述?

<select> 
    <option>English</option> 
    <option>Spanish</option> 
</select> 
  1. 我想這是最初顯示的說默認選項「選擇 語言」,而不是「英語」(我的第一選擇,默認顯示爲 )。
  2. 我不希望用戶能夠選擇「選擇語言」。
+4

我可能是錯的,但我覺得OP是爲了問如何顯示一些文本,不屬於選項,像這樣的:[鏈接](http://stackoverflow.com/questions/9447134/HTML的選擇 - 如何到組默認的文本 - 這-不會待顯示功能於下拉列表)。 Oded和Myles的答案都是針對你想要顯示其中一個選項的情況。順便說一下,我不認爲把它作爲邁爾斯解決方案中的第一種選擇是一個很好的設計。但這只是我個人的意見。 – 2012-08-24 19:22:26

+0

@YangChi同意。提交編輯問題。 – JBallin 2018-01-11 23:02:28

回答

44

如果select中的選項都沒有selected屬性,則第一個選項將是所選的一個。

爲了選擇是不是第一個默認選項,一個selected屬性添加到該選項:

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

您可以閱讀選擇元素的HTML 4.01 spec關於違約。

如果您需要學習像這樣的HTML基礎知識,我建議您閱讀一本好的HTML書 - 我推薦Head First HTML

55

大廈俄德的回答,您還可以設置默認選項,但不能讓它可以選擇的,如果它只是虛擬文本。例如,你可以這樣做:

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

這將顯示「選擇語言」用戶點擊選擇框,但用戶將無法選擇,因爲殘疾人屬性之前。

+0

我認爲將'selected =「選中的」''選中「會更簡單。相同的'禁用'。提交編輯。請注意,如果使用解析器包含值,則可以使用另一個答案:「我寫的內容是有效的多邊形HTML/XML。對於瀏覽器,使用<選項選擇>可以,但可能會導致文檔被拒絕其他解析器「 – JBallin 2018-01-11 23:36:07

5

.selectmenu{ 
 
    
 
\t -webkit-appearance: none; /*Removes default chrome and safari style*/ 
 
\t -moz-appearance: none; /* Removes Default Firefox style*/ 
 
\t background: #0088cc ; 
 
\t width: 200px; /*Width of select dropdown to give space for arrow image*/ 
 
\t text-indent: 0.01px; /* Removes default arrow from firefox*/ 
 
\t text-overflow: ""; /*Removes default arrow from firefox*/ /*My custom style for fonts*/ 
 
\t color: #FFF; 
 
\t border-radius: 2px; 
 
\t padding: 5px; 
 
    border:0 !important; 
 
\t 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>

0
<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

」隱藏「在所有瀏覽器中都不起作用,但如果您希望某些瀏覽器不顯示該選項,則將它放在那裏並沒有什麼壞處。我認爲在這種情況下,在查看選項時有「指令」是很好的。 – JBallin 2018-01-11 23:38:57

0

把你的提示在第一option並禁用它:

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

第一個選項將自動選定的默認值(當您查看下拉列表時首先看到的內容),但添加selected屬性時更加清楚並且實際需要第一個字段爲禁用字段時。

disabled屬性將使選項變爲不可選/變灰。


其他答案建議設置disabled=「disabled」,但如果你需要解析爲XHTML,這基本上是HTML的一個更嚴格的版本,這只是必要的。標準HTML上的disabled就足夠了。


F你想使「需要」時,選擇(不接受「選擇語言」選項作爲一個公認的答案):

required屬性添加到selection並設置第一optionvalue空字符串」」

<selection required> 
    <option disabled value=「」>Select a language</option> 
    <option>English</option> 
    <option>Spanish</option> 
</selection>