Có cách nào để có nhiều dòng trong phần tử <option> không?Bạn có thể có nhiều dòng trong phần tử <option> không?
Như thế này:
-------------------------
| Normal <option> element |
-------------------------
| <option> element broken |
| onto two lines |
-------------------------
| Normal <option> element |
-------------------------
Có bất kỳ phương pháp HTML/CSS, hay tôi nên sử dụng JavaScript?
Đó là trường hợp cụ thể hiển thị thẻ HTML bên trong phần tử <option></option>. Theo như tôi biết, các trình duyệt hoạt động rất khác trong khu vực này (Firefox hiển thị hình ảnh, các trình duyệt khác bỏ qua hầu hết hoặc tất cả các thẻ) và không có giải pháp trình duyệt chéo. Có thể bạn sẽ cần mô phỏng nó bằng JavaScript và một đánh dấu khác.
Tại http://www.w3.org/TR/2011/WD-html-markup-20110113/option.html họ nói:
nội dung được phép: nhân vật bình thường dữ liệu
... được quy định tại http://www.w3.org/TR/2011/WD-html-markup-20110113/syntax.html#normal-character-data
Các spec là khó hiểu, như thường lệ, nhưng tôi hiểu rằng bạn không thể chèn một chữ số < theo nghĩa đen (ví dụ: thẻ HTML chẳng hạn như <br>). Tôi không thể tìm thấy nơi nó xác định hành vi với không gian trống nhưng hầu hết các trình duyệt xuất hiện để thu gọn nó.
Vấn đề với lựa chọn là chúng là các phần tử biểu mẫu hệ điều hành chứ không phải các yếu tố biểu mẫu web. Đó là lý do tại sao không thể tạo kiểu cho chúng trong một số trình duyệt (ho ... IE6) không giống như các yếu tố đầu vào khác. Bạn đã xem một ví dụ về điều này ở bất kỳ đâu? Vì hệ điều hành không phù hợp với điều này, trình duyệt sẽ không hoạt động.
Tôi cũng chỉ ra rằng nó không thân thiện với người dùng. Người dùng được sử dụng ý tưởng của một hộp chọn có chứa các tùy chọn trên các dòng đơn. Nếu bạn bắt đầu đặt chúng trên nhiều dòng, bạn sẽ chống lại các hạt của khả năng sử dụng của hộp lựa chọn và khả năng tiếp cận vốn có. Nó có thể không phải là một ý tưởng tốt để có tuyến đường này.
Chỉ là ý kiến của tôi, nhưng hy vọng nó có ý nghĩa.
Khi câu trả lời này gần 3.5 tuổi, tôi sẽ thêm vào bây giờ, có rất nhiều thư viện JS để cài đặt lại hộp chọn. Một số trong số này, do bản chất của chúng, sẽ buộc các tùy chọn chọn lên hai dòng. Nếu đây vẫn là một mối quan tâm cho mọi người, thì đây có thể là một lựa chọn. Chỉ cần lưu ý rằng rất nhiều lib kiểu dáng không được hỗ trợ trên iOS hoặc Android. – tadywankenobi
Tôi không sợ. Các trình duyệt dường như bỏ qua các ký tự dòng mới và các thẻ HTML <br> bên trong các phần tử <option> và tôi không nghĩ JavaScript cung cấp bất kỳ cách nào để thao tác cách văn bản này xuất hiện.
Không, bạn sẽ phải tạo danh sách thả xuống tùy chỉnh cho một thứ như vậy.
jQuery cung cấp nhiều tính năng này; bạn có thể sử dụng CSS để xác định height cho các tùy chọn cụ thể để đạt được những gì bạn cần.
này có thể không những gì bạn muốn, nhưng bạn có thể nhận được hai dòng mỗi tùy chọn, bằng cách sử dụng các "optgroup" tag ví dụ:
<select>
<optgroup label="Click below for 'yes'">
<option value="yes">Yes</option>
</optgroup>
<optgroup label="Click below for 'No'">
<option value="no">No</option>
</optgroup>
</select>
Điều này sẽ không cho phép MỘT tùy chọn được tách riêng trên HAI dòng –
HotKey, nói đúng là bạn đúng. Những gì tôi đề nghị cung cấp cho các hiệu ứng của tách một tùy chọn trên hai dòng (xem http://jsfiddle.net/elusien/Sqc6Z/). Tùy chọn nào người dùng chọn, chỉ dòng thứ hai được trả lại. Trong phòng thủ của tôi, tôi đã nói rằng điều này có thể không phải là những gì được mong muốn. – Neil
Thực ra, bạn có ý tưởng tách tùy chọn và trì hoãn một nhóm dường như không phải là một ý tưởng tồi chút nào. Nhưng nói như vậy, làm thế nào nó sẽ làm việc với một nguồn dữ liệu? –
những gì là bình bởi nhiều dòng trong một yếu tố lựa chọn? – Vivek
thông thường bạn có một dòng trong phần tử tùy chọn mà bạn chọn, tôi muốn có hai dòng trong phần tử đó, ví dụ: mỗi tùy chọn có 2 dòng –
Sử dụng Javascript. –