Làm cách nào để đặt mô tả mặc định không thể chọn trong trình đơn thả xuống (chọn) trong HTML?

Question

Tôi có một danh sách thả xuống nơi người sử dụng chọn một ngôn ngữ:

<select> 
    <option>English</option> 
    <option>Spanish</option> 
</select> 

1. Tôi muốn các tùy chọn mặc định mà ban đầu được hiển thị để nói "Chọn một ngôn ngữ" thay vì "tiếng Anh" (tùy chọn đầu tiên của tôi, được hiển thị bởi mặc định).
2. Tôi không muốn người dùng có thể chọn "Chọn ngôn ngữ".

Answer 1

Nếu không có tùy chọn nào trong lựa chọn có thuộc tính selected, tùy chọn đầu tiên sẽ là tùy chọn được chọn.

Để chọn một tùy chọn mặc định đó không phải là người đầu tiên, thêm một thuộc tính selected để lựa chọn đó:

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

Bạn có thể đọc HTML 4.01 spec mặc định liên quan trong yếu tố lựa chọn.

Tôi khuyên bạn nên đọc một cuốn sách HTML tốt nếu bạn cần tìm hiểu các khái niệm cơ bản về HTML như thế này - Tôi khuyên bạn nên Head First HTML.

Answer 2

Chỉ cần chắc tùy chọn # 1 Chọn ngôn ngữ:

Live Demo

Answer 3

Xây dựng về câu trả lời Oded, bạn cũng có thể thiết lập các tùy chọn mặc định nhưng không làm cho nó một lựa chọn có thể lựa chọn nếu nó chỉ là văn bản giả. Ví dụ: bạn có thể làm:

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

Điều này sẽ hiển thị "Chọn ngôn ngữ" trước khi người dùng nhấp vào hộp chọn nhưng người dùng sẽ không thể chọn vì thuộc tính bị tắt.

Answer 4

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

Answer 5

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

Rời cờ tàn tật trong ngăn cản họ không chọn một tùy chọn và cờ ẩn sẽ loại bỏ nó khỏi danh sách. Trong trường hợp của tôi, tôi đã sử dụng nó với một danh sách enum như tốt và khái niệm giữ cùng

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

Answer 6

Đặt dấu nhắc của bạn trong 1 option và vô hiệu hóa nó:

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

Tùy chọn đầu tiên sẽ tự động được mặc định đã chọn (những gì bạn nhìn thấy đầu tiên khi bạn nhìn vào trình đơn thả xuống) nhưng thêm thuộc tính selected là rõ ràng hơn và thực sự cần thiết khi trường đầu tiên là trường bị vô hiệu hóa.

Thuộc tính disabled sẽ làm cho tùy chọn không thể chọn/chuyển sang màu xám.

---

câu trả lời khác đề nghị thiết lập disabled=“disabled” nhưng đó là chỉ cần thiết nếu bạn cần phải phân tích như XHTML, mà về cơ bản là một phiên bản nghiêm ngặt hơn về HTML.disabled bật tính năng này là đủ cho HTML chuẩn.

---

tôi f bạn muốn làm cho lựa chọn “yêu cầu” (không chấp nhận “Chọn một ngôn ngữ” tùy chọn như một câu trả lời được chấp nhận):

Thêm thuộc tính required-selection và thiết lập đầu tiên option 's value vào chuỗi trống ””.

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