Kaydırma çubuğu olmayan seçeneklere uyacak şekilde yüksekliğini ayarlamak için çoklu seçim yapın

Görünüşe göre bu işe yaramıyor:

   select[multiple]{
     height: 100%;
   }

seçimin% 100 sayfa yüksekliğine sahip olmasını sağlar ...

auto da çalışmıyor, hala dikey kaydırma çubuğunu alıyorum.

Başka fikir var mı?

Sanırım sizeözniteliği kullanabilirsiniz . Tüm yeni tarayıcılarda çalışır.

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

Bunu size, selectetiketindeki özniteliği kullanarak yapabilirsiniz . 8 seçeneğiniz olduğunu varsayarsak, bunu şöyle yaparsınız:

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

Eski, ancak bu, jQuery'ye ihtiyaç duymadan peşinde olduğunuz şeyi yapacak. Gizli taşma kaydırma çubuğundan kurtulur ve javascript onu doğru boyuta getirir.

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

Ve çok az miktarda javascript

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

JQuery için bunu deneyebilirsiniz. Ben her zaman aşağıdakileri yapıyorum ve işe yarıyor.

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

Bunu yalnızca Javascript / JQuery'de yapabilirsiniz, aşağıdaki JQuery ile yapabilirsiniz (seçiminize çoklu seçim kimliği verdiğinizi varsayarak):

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

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

Sorunun eski olduğunu biliyorum ama konu nasıl kapanmazsa yardım edeceğim.

"Beden" özelliği sorununuzu çözecektir.

Misal:

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

selectoptgroupher biri bir satır alan içerebilir :

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

Bu örnekte toplam size olup (1+1)+(1+2)=5.

Bunu basit bir javascript ile yapabilirsiniz ...

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

... veya kayıt sayısına kadar yüksekliği sınırlayın ...

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

Kaydırma çubuğunu kaldırmak için aşağıdaki CSS'yi ekleyin:

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

İşte bir pasaj:

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>

Size özelliğini kullanmak en pratik çözümdür, ancak yalnızca iki veya üç seçeneğe sahip öğelerin seçilmesine uygulandığında tuhaflıklar vardır .

• Boyut özelliği değerinin "0" veya "1" olarak ayarlanması, çoğunlukla varsayılan bir seçim öğesi (açılır menü) oluşturur.
• Boyut özniteliğinin "1" den daha büyük bir değere ayarlanması, çoğunlukla en az dört öğeyi görüntüleyebilen bir yüksekliğe sahip bir seçim listesi oluşturacaktır. Bu, istenmeyen beyaz boşluğa neden olan yalnızca iki veya üç öğe içeren listeler için de geçerlidir.

Basit JavaScript, size özniteliğini otomatik olarak doğru değere ayarlamak için kullanılabilir , örneğin bu kemana bakın .

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

Yukarıda bahsedildiği gibi, bu çözüm yalnızca iki veya üç seçenek olduğunda sorunu çözmez.

arkadaşlar: bir veritabanından de veri alırsanız: bunu $ registers = * _num_rows (Result_query) olarak çağırabilirsiniz

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

Yakın zamanda bu şartı aldım ve bu komut dosyasını oluşturmak için bu sorudaki diğer gönderileri kullandım:

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

Tüm çoklu seçimlerin boyutunu (yüksekliğini) seçenek sayısına göre ayarlamak için jQuery'yi kullanın:

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

Önce seçenek etiketini sayabilir ve ardından boyut özelliği için sayımı ayarlayabilirsiniz. Örneğin, PHP'de diziyi sayabilir ve ardından dizi için bir foreach döngüsü kullanabilirsiniz.

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

Bir seçim kutusunun işlenme şekli tarayıcının kendisi tarafından belirlenir. Böylece her tarayıcı size seçenek listesi kutusunun yüksekliğini başka bir yükseklikte gösterecektir. Bunu etkileyemezsin. Bunu değiştirmenin tek yolu, sıfırdan kendi seçiminizi yapmaktır.

Laravel topluluğunda oldukça popüler olan örnek bir paket kullanımı:

{!! 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/