458

Tôi có một yêu cầu rất kỳ lạ, trong đó tôi được yêu cầu không có tùy chọn nào được chọn theo mặc định trong menu thả xuống trong HTML. Tuy nhiên,

Tôi không thể sử dụng cái này,

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

Mở rộng đoạn trích

Bởi vì, vì điều này tôi sẽ phải thực hiện xác nhận để xử lý tùy chọn đầu tiên. Bất cứ ai có thể giúp tôi đạt được mục tiêu này mà không thực sự bao gồm tùy chọn đầu tiên như một phần của thẻ chọn?

html

— Pankaj Parashar
nguồn

2

Theo tôi biết đây là cách duy nhất để có được một dòng trống. Bạn có nghĩa là bạn sẽ phải xác nhận? Chỉ cần đặt một kiểm tra để nói nếu value = "" thì trả về false.

— Robert

1

Đây sẽ là một cơ hội tốt để sử dụng các nút radio thay vì thả xuống.

— Blazemonger

9

Theo tôi, không phải là một yêu cầu kỳ lạ. Tôi ở trên cùng một con thuyền. Tôi cũng cần một mặc định 'không có tùy chọn'. Tôi có một vài lần thả xuống mà không bắt buộc phải gửi biểu mẫu. Vô hiệu hóa chúng theo cách này sẽ ngăn người dùng không phải lựa chọn khi nó không phù hợp. Câu hỏi hay! +1

— Scott

Không phải là một yêu cầu kỳ lạ, nếu CHỌN có thuộc tính BẮT BUỘC thì việc có tùy chọn nhãn giữ chỗ là yêu cầu của HTML5 dev.w3.org/html5/spec-preview/

— Testo Testini

Các nút radio @Blazemonger là một ý tưởng tồi tệ nếu bạn có nhiều hơn 3 hoặc 4. Tưởng tượng một danh sách thả xuống với hơn 15 tùy chọn, hoặc 50 hoặc nhiều hơn? Những có những vấn đề thiết kế riêng của họ trong nhiều trường hợp nhưng vấn đề này vẫn đứng đó nút radio không quy mô tốt ở tất cả .

— TylerH

1014

Có lẽ đây sẽ rất hữu ích

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --Sẽ được hiển thị theo mặc định. Nhưng nếu bạn chọn một tùy chọn, bạn sẽ không thể chọn lại.

Bạn cũng có thể ẩn nó bằng cách thêm một khoảng trống option

<option style="display:none">

vì vậy nó sẽ không xuất hiện trong danh sách nữa.

Lựa chọn 2

Nếu bạn không muốn viết CSS và mong đợi hành vi tương tự của giải pháp ở trên, chỉ cần sử dụng:

<option hidden disabled selected value> -- select an option -- </option>

— Gambit
nguồn

15

Đây là một JSFiddle những điều trên , trong trường hợp bất cứ ai cần đến nó.

— Uwe Keim

26

@azerafati như @Rafael_Mori chỉ ra rằng bạn có thể lưu trữ tương tự bằng cách sử dụng thuộc tính "ẩn", do đó không cần CSS. Chỉ là HTML5 thuần túy;)<option hidden disabled selected value> -- select an option -- </option>

— BrainOverflow

Nếu tôi muốn có thể chọn nó trở lại thì sao? Tôi chỉ không muốn nó gửi bất cứ thứ gì. Có thể không?

— Michael Rogers

1

thêm một thuộc tính ẩn cho thành phần tùy chọn đã làm điều kỳ diệu cho tôi! không mong đợi nó sẽ dễ dàng như vậy. cảm ơn

— S. Domeng

Xin lưu ý, cả thuộc tính ẩn và kiểu hiển thị đều không hoạt động trong IE, thậm chí 11. stackoverflow.com/questions/58862242/

— Kẻ

113

Bạn có thể sử dụng Javascript để đạt được điều này. Hãy thử đoạn mã sau:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

hoặc JQuery

$("#myDropdown").prop("selectedIndex", -1);

— Matschie
nguồn

Giải pháp này hoạt động một phần với Chrome 35: danh sách thả xuống không hiển thị bất kỳ lựa chọn nào khi danh sách tùy chọn là vô hình, nhưng hiển thị tùy chọn đầu tiên được chọn khi danh sách tùy chọn được hiển thị. Safari 7 hoạt động như dự định mặc dù.

— flochtililoch

Điều thú vị là: điều này hoạt động với xác nhận mẫu HTML. Nếu bạn sử dụng requiredthuộc tính trên thành selectphần và gửi mà không chọn tùy chọn, xác thực mẫu sẽ thất bại và cho bạn biết, bạn phải thực hiện lựa chọn. Vì vậy tôi thực sự thích cách tiếp cận này. (Ít nhất được thử nghiệm trong Chrome)

— Andreas Linnert

Không hoạt động (ít nhất là trong các trình duyệt hiện tại khi viết bài này - và không cần thiết phải dựa vào javascript.

— im lặng vào

1

Kể từ năm 2019, chỉ có Safari iOS 10 từ chối chơi bóng với điều này

— Ayyash

36

Hôm nay (2015/02/25)

Đây là HTML5 hợp lệ và gửi một khoảng trống (không phải khoảng trắng) đến máy chủ:

<option label=" "></option>

Xác thực tính hợp lệ trên http://validator.w3.org/check

Đã xác minh hành vi với Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

Các điều sau đây cũng vượt qua xác thực ngày hôm nay , nhưng cũng vượt qua một số loại ký tự không gian từ máy chủ từ hầu hết các trình duyệt (có thể không mong muốn) và một khoảng trống trên các trình duyệt khác (Chrome40 / Linux chuyển sang một khoảng trống):

<option>&#160;</option>

Trước đây (2013-08 / 02)

Theo ghi chú của tôi, thực thể không phá vỡ bên trong các thẻ tùy chọn được hiển thị ở trên đã tạo ra lỗi sau vào năm 2013:

Lỗi: W3C Markup Validaton Service (Công khai): Phần tử tùy chọn con đầu tiên của một thành phần được chọn có thuộc tính bắt buộc và không có nhiều thuộc tính và có kích thước là 1, phải có thuộc tính giá trị trống hoặc phải không có nội dung văn bản.

Vào thời điểm đó, một không gian thông thường là XHTML4 hợp lệ và đã gửi một khoảng trống (không phải là khoảng trắng) đến máy chủ từ mọi trình duyệt:

<option> </option>

Tương lai

Nó sẽ làm cho trái tim tôi vui mừng nếu thông số kỹ thuật được cập nhật để cho phép một tùy chọn trống. Tốt nhất là sử dụng cú pháp ngắn gọn nhất. Một trong những điều sau đây sẽ là tuyệt vời:

<option />
<option></option>

Kiểm tra hồ sơ

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>

— GlenPeterson
nguồn

15

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>

Mở rộng đoạn trích

Chỉ cần đặt "ẩn" vào tùy chọn bạn muốn ẩn trong danh sách thả xuống.

— Rafael Mori
nguồn

8

Giải pháp hoạt động chỉ bằng cách sử dụng CSS:

A: CSS nội tuyến

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Mở rộng đoạn trích

B: Biểu định kiểu CSS

Nếu bạn có một file CSS bên mình, bạn có thể nhắm mục tiêu người đầu tiên optionsử dụng:

select.first-opt-hidden option:first-of-type {
  display:none;
}

<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

Mở rộng đoạn trích

— Kai Noack
nguồn

4

Điều này sẽ giúp:

https://www.w3schools.com/tags/att_select_Vquired.asp

 <form>
 <select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<button type="submit">Submit</button>
</form>

Mở rộng đoạn trích

— rohan parab
nguồn

Đây là cách hiện đại nhất (html5) để đạt được yêu cầu này, lưu ý rằng điều này đòi hỏi phải có một loại nút = trình. Nút type = với trình xử lý gửi onclick không tự động yêu cầu người dùng thực hiện lựa chọn.

— Arjan

3

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Bạn có thể tránh xác nhận tùy chỉnh trong trường hợp này.

— Fawaz
nguồn

2

Chỉ là một nhận xét nhỏ:

một số trình duyệt Safari dường như không tôn trọng thuộc tính "ẩn" cũng như cài đặt kiểu "hiển thị: không" (được thử nghiệm với Safari 12.1 trong MacOS 10.12.6). Không có văn bản giữ chỗ rõ ràng, các trình duyệt này chỉ hiển thị một dòng đầu tiên trống trong danh sách các tùy chọn. Do đó, có thể hữu ích khi luôn cung cấp một số văn bản giải thích cho mục nhập "giả" này:

<option hidden disabled selected value>(select an option)</option>

Nhờ thuộc tính "bị vô hiệu hóa", dù sao nó cũng sẽ không được chọn chủ động.

— Andreas Rozek
nguồn

1

Tôi hiểu những gì bạn đang cố gắng làm. Cách tốt nhất và thành công nhất là:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

— Guryash Singh
nguồn

1

Tôi thấy nó thực sự thú vị bởi vì tôi vừa trải nghiệm điều tương tự cách đây không lâu. Tuy nhiên, tôi đã bắt gặp một ví dụ trên Internet về giải pháp liên quan đến việc này.

Nếu không có thêm bất kỳ sự cố nào, hãy xem đoạn mã dưới đây:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

Với điều đó, nó sẽ không thể gửi nhưng có thể lựa chọn, bất cứ lúc nào. Thuận tiện hơn cho Giao diện người dùng và tuyệt vời cho Trải nghiệm người dùng.

Vâng, đó là tất cả, tôi hy vọng nó sẽ giúp. Chúc mừng!

— farisfath25
nguồn

Làm cho nó không thể gửi nhưng cũng thu hút sự chú ý của người dùng vào danh sách thả xuống có vẻ dư thừa, nhưng tôi thích đề xuất này

— Iofacture

@lofacture: cảm ơn vì đầu vào. Thật ra, mã tôi đã viết là mã tôi muốn, nhưng đúng như bạn nói, nó phụ thuộc vào nhu cầu của người dùng / chủ sở hữu

— farisfath25

0

Không có giải pháp HTML. Theo thông số HTML 4.01, hành vi của trình duyệt không được xác định nếu không có optionthành phần nào có selectedthuộc tính và những gì trình duyệt thực hiện trong thực tế là chúng tạo tùy chọn đầu tiên được chọn trước.

Như một giải pháp thay thế, bạn có thể thay thế selectphần tử bằng một tập hợp các input type=radiophần tử (có cùng namethuộc tính). Điều này tạo ra một điều khiển cùng loại mặc dù với giao diện người dùng và giao diện khác nhau. Nếu không có input type=radiophần tử nào có checkedthuộc tính, thì không phần tử nào trong số chúng được chọn ban đầu trong hầu hết các trình duyệt hiện đại.

— Jukka K. Korpela
nguồn

0

Tôi đang sử dụng khung công tác Laravel 5 và câu trả lời của @Gambi cũng có hiệu quả với tôi nhưng với một số thay đổi cho dự án của tôi.

Tôi có các giá trị tùy chọn trong bảng cơ sở dữ liệu và tôi sử dụng chúng với câu lệnh foreach. Nhưng trước khi tuyên bố tôi đã thêm một tùy chọn với các cài đặt được đề xuất @Gambit và nó đã hoạt động.

Đây là mẫu mực của tôi:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

Tôi hy vọng điều này sẽ giúp ai đó là tốt. Hãy tiếp tục phát huy!

— ĐĂNG NHẬP Oracle
nguồn

0

Thử cái này:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

Tùy chọn đầu tiên trong trình đơn thả xuống sẽ để trống.

— Abhijit pai
nguồn

0

Để hiển thị, vui lòng chọn một giá trị thả xuống và ẩn nó sau khi một số giá trị được chọn. vui lòng sử dụng mã dưới đây.

nó cũng sẽ hỗ trợ xác nhận cần thiết.

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

Mở rộng đoạn trích

— Bathri Nathan
nguồn

0

Nếu bạn đang sử dụng Angular (2+), (hoặc bất kỳ khung nào khác), bạn có thể thêm một số logic. Logic sẽ là: chỉ hiển thị một tùy chọn trống nếu người dùng chưa chọn bất kỳ tùy chọn nào khác. Vì vậy, sau khi người dùng chọn một tùy chọn, tùy chọn trống sẽ biến mất.

Đối với Angular (9), nó sẽ trông giống như thế này:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

— Mike de Klerk
nguồn

-2

Thử cái này:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

Xác thực trong HTML5. Hoạt động với requiredthuộc tính trong phần tử chọn. Có thể được lựa chọn lại. Hoạt động trong Google Chrome 45, Internet Explorer 11, Edge, Firefox 41.

— Tristan Bailey
nguồn

tùy chọn mặc định là trống

Hôm nay (2015/02/25)

Trước đây (2013-08 / 02)

Tương lai

Kiểm tra hồ sơ