HTML Chọn + giới hạn số tùy chọn hiển thị

Question

Tôi có lựa chọn được hiển thị trong đồ họa cho Ngày tham gia. Nó hiển thị 20 ngày hiển thị và có 21 đến 31 không hiển thị nhưng bạn có thể cuộn xuống chúng. Do cách bố trí của trang, lựa chọn sẽ xuất hiện thay vì xuống - trông lạ.

Với điều này trong đầu, tôi có thể giới hạn số tùy chọn có thể nhìn thấy được chọn để nói 10 không? Ví dụ: hiển thị từ 01 đến 10 và có từ 11 đến 31 bị ẩn nhưng có sẵn để chọn.

điều này có thể thực hiện được không?

thx

Answer 1

Thêm thuộc tính size-<select>:

<select style=" width:100px;" size="2"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    <option value="4">4</option> 
</select> 

Answer 2

Các hành vi phụ thuộc vào trình duyệt và anh ta không thể kiểm soát của tác giả. Bạn có thể sử dụng thuộc tính size = 10 trong phần tử, nhưng nó cũng thay đổi menu thành một hộp danh sách để 10 tùy chọn sẽ hiển thị ngay cả khi menu không được tập trung vào. Để đạt được hành vi mà bạn mô tả, bạn cần tạo các điều khiển của riêng mình bằng JavaScript và CSS.

Từ quan điểm khả năng sử dụng, hộp nhập văn bản thường thích hợp hơn với menu khi chọn ngày trong tháng. Nó là thuận tiện hơn để gõ một hoặc hai chữ số hơn để chọn từ một danh sách 30 hoặc hơn các mục.

Answer 3

Thực ra có một chút hack có thể đạt được khả năng thiếu kỳ lạ này để chọn số lượng mục được hiển thị tại TAG CHỌN.

1 -

Giả sử chúng tôi muốn SELECT hiển thị số lượng tối đa 10 mục. Thêm sự kiện js sau để TAG SELECT của bạn sẽ đạt được mục tiêu này:

onfocus='this.size=10;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();' 

này sẽ đánh lừa SELECT của bạn cho nó hiệu quả mong muốn biến nó thành một SELECT cỡ.

2 -

Giả sử tại thời điểm nhất định có ít hơn 10 mục chúng tôi muốn hiển thị.

Giả sử bạn đang nhận được SELECT của bạn từ một truy vấn SQL bạn có thể làm một cái gì đó như sau: Một khi bạn biết có bao nhiêu hàng truy vấn của bạn có bạn có thể đưa câu bên cạnh các vòng lặp

if($nRow<10){ 
    $nRowSelect=$nRow+1; 
} 
else{ 
    $nRowSelect=10; 
} 

Vì vậy, nếu có ít hơn 10 hàng ở mỗi vòng lặp, nó phân bổ số hàng mong muốn mà nó sẽ hiển thị.

onfocus='this.size=$nRowSelect;' 
onblur='this.size=1;' 
onchange='this.size=1; this.blur();' 

3 -

Buggy hành vi thay yếu tố. Kể từ khi hack này thay thế một SELECT phổ biến với một 'có kích thước' nó mất không gian nó cần di dời nội dung, không giống như một SELECT phổ biến mà chồng chéo nội dung bên dưới nó. Để ngăn chặn điều này xảy ra nếu SELECT sẽ được đặt giả sử thành một TAG TD đầu tiên bạn có thể đặt nó trong một DIV với phong cách sau đây:

position:absolute; 
z-index:1; 

này sẽ cho phép các kích thước CHỌN chồng chéo nội dung dưới đây nó như thể nó là một SELECT phổ biến.