Thực hiện nhiều lựa chọn để điều chỉnh chiều cao của nó cho phù hợp với các tùy chọn mà không cần thanh cuộn

Rõ ràng điều này không hoạt động:

   select[multiple]{
     height: 100%;
   }

nó làm cho vùng chọn có chiều cao trang 100% ...

auto cũng không hoạt động, tôi vẫn nhận được thanh cuộn dọc.

Bất kỳ ý tưởng khác?

Tôi đoán bạn có thể sử dụng sizethuộc tính. Nó hoạt động trong tất cả các trình duyệt gần đây.

<select name="courses" multiple="multiple" size="30" style="height: 100%;">

Bạn có thể làm điều này bằng cách sử dụng sizethuộc tính trong selectthẻ. Giả sử bạn có 8 tùy chọn, sau đó bạn sẽ làm như sau:

<select name='courses' multiple="multiple" size='8'>

Cũ, nhưng điều này sẽ làm những gì bạn đang theo đuổi mà không cần jquery. Phần tràn ẩn sẽ loại bỏ thanh cuộn và javascript làm cho nó có kích thước phù hợp.

<select multiple='multiple' id='select' style='overflow:hidden'>
<option value='foo'>foo</option>
<option value='bar'>bar</option>
<option value='abc'>abc</option>
<option value='def'>def</option>
<option value='xyz'>xyz</option>
</select>

Và chỉ một lượng nhỏ javascript

var select = document.getElementById('select');
select.size = select.length;

Đối với jQuery, bạn có thể thử điều này. Tôi luôn làm những điều sau đây và nó hoạt động.

$(function () {
   $("#multiSelect").attr("size",$("#multiSelect option").length);
});

Bạn chỉ có thể thực hiện việc này trong Javascript / JQuery, bạn có thể thực hiện điều đó với JQuery sau (giả sử bạn đã cung cấp cho mình một id gồm nhiều lựa chọn):

$(function () {
    $("#multiSelect").css("height", parseInt($("#multiSelect option").length) * 20);
});

Demo: http://jsfiddle.net/AZEFU/

Tôi biết câu hỏi đã cũ, nhưng làm thế nào để chủ đề không bị đóng, tôi sẽ giúp đỡ.

Thuộc tính "size" sẽ giải quyết vấn đề của bạn.

Thí dụ:

<select name="courses" multiple="multiple" size="30">

selectcó thể chứa optgroupmỗi dòng có một dòng:

<select id="list">
  <optgroup label="Group 1">
    <option value="1">1</option>
  </optgroup>
  <optgroup label="Group 2">
    <option value="2">2</option>
    <option value="3">3</option>
  </optgroup>
</select>
<script>
  const l = document.getElementById("list")
  l.setAttribute("size", l.childElementCount + l.length)
</script>

Trong ví dụ này, tổng số sizelà (1+1)+(1+2)=5.

Bạn có thể làm điều này với javascript đơn giản ...

<select multiple="multiple" size="return this.length();">

... hoặc giới hạn chiều cao cho đến khi số lượng bản ghi ...

<select multiple="multiple" size="return this.length() > 10 ? this.length(): 10;">

Để xóa thanh cuộn, hãy thêm CSS sau:

select[multiple] {
    overflow-y: auto;
}

Đây là một đoạn mã:

select[multiple] {
  overflow-y: auto;
}

<select>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<select multiple size="3">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Sử dụng thuộc tính kích thước là giải pháp thiết thực nhất, tuy nhiên có những điều kỳ quặc khi nó được áp dụng để chọn các phần tử chỉ có hai hoặc ba tùy chọn.

• Đặt giá trị thuộc tính kích thước thành "0" hoặc "1" hầu hết sẽ hiển thị phần tử chọn mặc định (trình đơn thả xuống).
• Đặt thuộc tính kích thước thành giá trị lớn hơn "1" hầu hết sẽ hiển thị danh sách lựa chọn có chiều cao có khả năng hiển thị ít nhất bốn mục. Điều này cũng áp dụng cho danh sách chỉ có hai hoặc ba mục, dẫn đến khoảng trắng ngoài ý muốn.

JavaScript đơn giản có thể được sử dụng để tự động đặt thuộc tính size thành giá trị chính xác, ví dụ: xem fiddle này .

$(function() {
    $("#autoheight").attr("size", parseInt($("#autoheight option").length)); 
});

Như đã đề cập ở trên, giải pháp này không giải quyết được vấn đề khi chỉ có hai hoặc ba lựa chọn.

bạn bè: nếu bạn truy xuất dữ liệu de từ một DB: bạn có thể gọi đây là $ register = * _num_rows (Result_query) sau đó

<select size=<?=$registers + 1; ?>"> 

Tôi đã có yêu cầu này gần đây và đã sử dụng các bài đăng khác từ câu hỏi này để tạo tập lệnh này:

$("select[multiple]").each(function() {
  $(this).css("height","100%")
    .attr("size",this.length);
})

Để điều chỉnh kích thước (chiều cao) của tất cả các lựa chọn theo số lượng tùy chọn, hãy sử dụng jQuery:

$('select[multiple = multiple]').each(function() {
    $(this).attr('size', $(this).find('option').length)
})

Trước tiên, bạn có thể đếm thẻ tùy chọn, sau đó đặt số lượng cho thuộc tính kích thước. Ví dụ, trong PHP, bạn có thể đếm mảng và sau đó sử dụng vòng lặp foreach cho mảng.

<?php $count = count($array); ?>
<select size="<?php echo $count; ?>" style="height:100%;">
<?php foreach ($array as $item){ ?>
    <option value="valueItem">Name Item</option>
<?php } ?>
</select>

Cách hiển thị hộp chọn do chính trình duyệt xác định. Vì vậy, mọi trình duyệt sẽ hiển thị cho bạn chiều cao của hộp danh sách tùy chọn ở một chiều cao khác. Bạn không thể ảnh hưởng đến điều đó. Cách duy nhất bạn có thể thay đổi đó là thực hiện một lựa chọn riêng từ đầu.

Đây là cách sử dụng gói mẫu, khá phổ biến trong cộng đồng Laravel:

{!! Form::select('subdomains[]', $subdomains, null, [
    'id' => 'subdomains',
    'multiple' => true,
    'size' => $subdomains->count(),
    'class' => 'col-12 col-md-4 form-control '.($errors->has('subdomains') ? 'is-invalid' : ''),
]) !!}

Gói: https://laravelcollective.com/