Buat beberapa pilihan untuk menyesuaikan ketinggiannya agar pas dengan opsi tanpa bilah gulir

Ternyata ini tidak berhasil:

   select[multiple]{
     height: 100%;
   }

itu membuat yang dipilih memiliki 100% tinggi halaman ...

auto tidak berfungsi juga, saya masih mendapatkan scrollbar vertikal.

Ada ide lain?

Saya kira Anda dapat menggunakan sizeatribut tersebut. Ia bekerja di semua browser terbaru.

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

Anda dapat melakukannya dengan menggunakan sizeatribut di selecttag. Misalkan Anda memiliki 8 opsi, maka Anda akan melakukannya seperti:

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

Tua, tapi ini akan melakukan apa yang Anda cari tanpa perlu jquery. Overflow yang tersembunyi menghilangkan scrollbar, dan javascript membuatnya dalam ukuran yang tepat.

<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>

Dan hanya sedikit javascript

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

Untuk jQuery Anda dapat mencoba ini. Saya selalu melakukan hal berikut dan berhasil.

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

Anda hanya dapat melakukan ini di Javascript / JQuery, Anda dapat melakukannya dengan JQuery berikut (dengan asumsi Anda telah memberikan id pilihan multiselect):

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

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

Saya tahu pertanyaannya sudah tua, tetapi bagaimana topiknya tidak ditutup, saya akan memberikan bantuan saya.

Atribut "size" akan menyelesaikan masalah Anda.

Contoh:

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

selectbisa berisi optgroupyang masing-masing membutuhkan satu baris:

<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>

Dalam contoh ini, totalnya sizeadalah (1+1)+(1+2)=5.

Anda dapat melakukan ini dengan javascript sederhana ...

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

... atau batasi tinggi hingga jumlah catatan ...

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

Untuk menghapus scrollbar tambahkan CSS berikut:

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

Berikut cuplikannya:

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>

Menggunakan atribut size adalah solusi paling praktis, namun ada kebiasaan ketika diterapkan untuk memilih elemen dengan hanya dua atau tiga opsi.

• Menyetel nilai atribut ukuran ke "0" atau "1" sebagian besar akan merender elemen pemilihan default (tarik-turun).
• Menyetel atribut ukuran ke nilai yang lebih besar dari "1" sebagian besar akan membuat daftar pilihan dengan ketinggian yang mampu menampilkan setidaknya empat item. Ini juga berlaku untuk daftar dengan hanya dua atau tiga item, yang mengarah ke ruang kosong yang tidak diinginkan.

JavaScript sederhana dapat digunakan untuk mengatur atribut ukuran ke nilai yang benar secara otomatis, misalnya lihat biola ini .

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

Seperti disebutkan di atas, solusi ini tidak menyelesaikan masalah jika hanya ada dua atau tiga opsi.

teman: jika Anda mengambil de data dari DB: Anda dapat memanggil ini $ register = * _num_rows (Result_query) lalu

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

Saya memiliki persyaratan ini baru-baru ini dan menggunakan postingan lain dari pertanyaan ini untuk membuat skrip ini:

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

Untuk menyesuaikan ukuran (tinggi) dari semua pilihan ganda dengan jumlah pilihan, gunakan jQuery:

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

Anda dapat menghitung tag opsi terlebih dahulu, lalu mengatur atribut hitungan ukuran. Misalnya, di PHP Anda dapat menghitung array dan kemudian menggunakan loop foreach untuk array tersebut.

<?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>

Cara kotak pilih ditampilkan ditentukan oleh browser itu sendiri. Jadi setiap browser akan menunjukkan ketinggian kotak daftar opsi di ketinggian lain. Anda tidak dapat mempengaruhi itu. Satu-satunya cara Anda dapat mengubahnya adalah dengan membuat pilihan sendiri dari awal.

Berikut adalah contoh penggunaan paket yang cukup populer di komunitas 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' : ''),
]) !!}

Paket: https://laravelcollective.com/