Làm thế nào để tạo một hộp danh sách trong HTML mà không cho phép nhiều lựa chọn?

97

Tôi không có nhiều kinh nghiệm về HTML. Tôi đang tìm cách tạo một hộp danh sách đơn giản, nhưng một trong những yêu cầu là TẮT nhiều lựa chọn. Hầu hết mã cho hộp danh sách đều như thế này -

 <select name="sometext" multiple="multiple">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
    <option>text4</option>
    <option>text5</option>
 </select>

Nhưng điều này cho phép nhiều lựa chọn.

Ở đây , một câu hỏi tương tự đã được đặt ra, nhưng câu trả lời "tốt nhất" đã bị bỏ phiếu từ chối. Vì vậy, tôi không chắc điều này có thể được thực hiện bằng cách nào khác. Xin vui lòng giúp đỡ.

html listbox

— CodeBlue
nguồn

5

Đối với bạn là những người mới đến, vui lòng tránh các trang web nói trên vì lợi ích của riêng bạn - họ có SEO tốt nhưng đó là về nó. Nó đầy rẫy những thói quen và thói quen xấu mà bạn sẽ rất tiếc sau này học được. Sử dụng API từ MDN (Mozilla), trong trường hợp này là developer.mozilla.org/en-US/docs/Web/HTML/Element/select .

— Ben

3

@Steve cảm ơn vì đã cảnh báo. Nhận xét của anh ta "Đây là lý do tại sao tôi có một công việc" cũng tỏ ra kiêu ngạo. Nếu bạn có một công việc, tốt cho bạn. Đây là một diễn đàn cho câu trả lời và không phải quảng cáo.

— CodeBlue

170

Chỉ cần sử dụng thuộc tính kích thước:

<select name="sometext" size="5">
  <option>text1</option>
  <option>text2</option>
  <option>text3</option>
  <option>text4</option>
  <option>text5</option>
</select>

Để làm rõ, việc thêm thuộc tính kích thước không loại bỏ nhiều lựa chọn.

Lựa chọn duy nhất hoạt động vì bạn đã loại bỏ thuộc tính multiple = "nhiều".

Thêm thuộc tính size = "5" vẫn là một ý kiến hay, nghĩa là phải hiển thị ít nhất 5 dòng. Xem tài liệu tham khảo đầy đủ tại đây

— aaroncatlin
nguồn

2

Ủng hộ cho sự thật. Ngoài ra, khi câu hỏi được đăng trước đây, giải pháp này có thể không được hỗ trợ rộng rãi bởi tất cả các trình duyệt.

— aaroncatlin

Nó có thể bị phản đối vì không có bất kỳ thứ gì trong tiêu chuẩn HTML yêu cầu trình duyệt hiển thị nó dưới dạng hộp danh sách nếu thuộc tính kích thước được đặt. Có, tất cả các trình duyệt chính hiện nay đều làm như vậy, nhưng không có gì đảm bảo rằng chúng sẽ luôn như vậy. Tuy nhiên, trên thực tế, đây sẽ là một thay đổi đột phá đối với rất nhiều trang web, không có trình duyệt nào có khả năng thay đổi nó.

— Elezar

1

Tiêu chuẩn này có một chút giải thích: "Kích thước hiển thị của một phần tử được chọn là kết quả của việc áp dụng các quy tắc để phân tích cú pháp số nguyên không âm cho giá trị của thuộc tính size của phần tử , nếu nó có một và phân tích cú pháp thành công." Trong khi điều này không nói rõ rằng nó sẽ được hiển thị dưới dạng Dropdown hoặc Listbox, sẽ rất khó để hiển thị điều khiển Dropdown hiển thị nhiều hơn 1 phần tử. ( html.spec.whatwg.org/#the-select-element )

— aaroncatlin

Cảm ơn!! Và điều này có thể là năng động, rõ ràng, với Js: D

— Jcc.Sanabria

56

Xóa thuộc tính multiple = "multiple" và thêm SIZE = 6 với số phần tử bạn muốn

bạn có thể muốn kiểm tra trang web này

http://www.htmlcodetutorial.com/forms/_SELECT.html

— thăm dò
nguồn

2

Đối với Asp.Net MVC

@Html.ListBox("parameterName", ViewBag.ParameterValueList as MultiSelectList, 
 new { 
 @class = "chosen-select form-control"
 })

hoặc là

  @Html.ListBoxFor(model => model.parameterName,
  ViewBag.ParameterValueList as MultiSelectList,
   new{
       data_placeholder = "Select Options ",
       @class = "chosen-select form-control"
   })

— Deshani Tharaka
nguồn