Ai đó có thể xác nhận rằng nó không thể thay đổi chiều cao của trình đơn thả xuống được hiển thị khi bạn nhấp vào một hộp chọn không.
Thuộc tính kích thước của vùng chọn làm cho nó giống như một danh sách, thuộc tính chiều cao trong CSS cũng không hoạt động tốt.
Câu trả lời:
Đã xác nhận.
Phần thả xuống được đặt thành:
xcác mục nhập (với thanh cuộn để xem còn lại), đâu xlà
Đối với (3) ở trên, bạn có thể xem kết quả trong JSFiddle này
tôi đang làm việc trên một plugin jquery thay thế thả xuống để giải quyết vấn đề này. Đối với bài đăng này, nó gần như không thể phân biệt được với một trình đơn thả xuống gốc về giao diện và chức năng .
đây là bản demo (cũng là liên kết để tải xuống): http://programmingdrunk.com/current-projects/dropdownReplacement/
đây là trang dự án của plugin:
http://plugins.jquery.com/project/dropdownreplacement
(cập nhật :) trang plugin jquery dường như không còn hoạt động. Tôi có thể sẽ không đặt plugin của mình trên trang web mới của họ khi chúng hoạt động, vì vậy, hãy sử dụng liên kết Progradrunk.com để demo / tải xuống
KHÔNG . Không thể thay đổi chiều cao của trình đơn thả xuống đã chọn vì thuộc tính đó là dành riêng cho trình duyệt.
Tuy nhiên, nếu bạn muốn có chức năng đó, thì có rất nhiều lựa chọn. Bạn có thể sử dụng bootstrap dropdown-menuvà xác định thuộc max-heighttính của nó . Một cái gì đó như thế này.
$('.dropdown-menu').on( 'click', 'a', function() {
var text = $(this).html();
var htmlText = text + ' <span class="caret"></span>';
$(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});.dropdown-menu {
max-height: 146px;
overflow: scroll;
overflow-x: hidden;
margin-top: 0px;
}
.caret {
float: right;
margin-top: 5%;
}
#menu1 {
width: 160px;
text-align: left;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container" style="margin:10px">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
<span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>Trên thực tế, bạn loại có thể! Đừng gặp rắc rối với javascript ... Tôi chỉ bị mắc kẹt với điều tương tự đối với trang web tôi đang tạo và nếu bạn tăng thuộc tính 'font-size' trong CSS cho thẻ thì nó cũng tự động tăng chiều cao. Nhỏ nhắn nhưng đó là điều khiến tôi rất phiền lòng ha ha
Đây không phải là một giải pháp hoàn hảo nhưng nó có tác dụng.
Trong thẻ select, hãy bao gồm các thuộc tính sau, trong đó 'n' là số hàng thả xuống sẽ được hiển thị.
<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>
Có ba vấn đề với giải pháp này. 1) Có một flash nhanh chóng của tất cả các yếu tố được hiển thị trong lần nhấp chuột đầu tiên. 2) Vị trí được đặt thành 'tuyệt đối' 3) Ngay cả khi có ít hơn 'n' mục, hộp thả xuống sẽ vẫn dành cho kích thước của 'n' mục.
Các Chí Row Câu trả lời là một lựa chọn tốt cho vấn đề này, nhưng tôi đã tìm thấy một lỗi i các onclickđối số. Thay vào đó, sẽ là:
<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>
(Và đề cập rằng bạn phải thay thế " n " bằng số dòng bạn cần)
Bạn có thể thay đổi chiều cao của một. Không sử dụng height="500"(Chỉ là một số ví dụ). Sử dụng phong cách. Bạn có thể sử dụng <style>thẻ hoặc chỉ sử dụng cái này:
<!DOCTYPE html>
<html>
<body>
<select id="option" style="height: 100px;">
<option value="1">Option 1
<option value="2">Option 2
</select>
</body>
</html>
Tôi nhận thấy sự thay đổi:
<select id="option" style="height: 100px;">
Và thậm chí tốt hơn ...
style="height: 100px;">
Bạn thấy điều đó?
Hãy bình chọn nếu nó hữu ích!
<select>phần tử, không phải chính phần tử đó. Tôi đã hỏi câu hỏi này hơn 10 năm trước khi việc tạo kiểu cho widget này thực tế là không thể. Tôi chắc chắn rằng đây không còn là trường hợp nữa.