Effettua la selezione multipla per regolare la sua altezza in base alle opzioni senza barra di scorrimento

Apparentemente questo non funziona:

   select[multiple]{
     height: 100%;
   }

fa sì che la selezione abbia un'altezza della pagina del 100% ...

auto non funziona neanche, ottengo ancora la barra di scorrimento verticale.

Altre idee?

Immagino che tu possa usare l' sizeattributo. Funziona in tutti i browser recenti.

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

Puoi farlo utilizzando l' sizeattributo nel selecttag. Supponendo che tu abbia 8 opzioni, allora lo faresti come:

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

Vecchio, ma questo farà quello che cerchi senza bisogno di jquery. L'overflow nascosto elimina la barra di scorrimento e il javascript lo rende della dimensione giusta.

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

E solo una piccola quantità di javascript

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

Per jQuery puoi provare questo. Faccio sempre quanto segue e funziona.

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

Puoi farlo solo in Javascript / JQuery, puoi farlo con il seguente JQuery (supponendo che tu abbia dato alla tua selezione un ID di selezione multipla):

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

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

So che la domanda è vecchia, ma come l'argomento non è chiuso darò il mio aiuto.

L'attributo "taglia" risolverà il tuo problema.

Esempio:

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

selectpotrebbe contenere optgroupche richiede una riga ciascuno:

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

In questo esempio il totale sizeè(1+1)+(1+2)=5 .

Puoi farlo con un semplice javascript ...

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

... o limitare l'altezza fino al numero di record ...

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

Per rimuovere la barra di scorrimento aggiungi il seguente CSS:

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

Ecco uno snippet:

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>

L'uso dell'attributo size è la soluzione più pratica, tuttavia ci sono stranezze quando viene applicato per selezionare elementi con solo due o tre opzioni.

• L'impostazione del valore dell'attributo size su "0" o "1" renderà principalmente un elemento di selezione predefinito (menu a discesa).
• L'impostazione dell'attributo size su un valore maggiore di "1" renderà per lo più un elenco di selezione con un'altezza in grado di visualizzare almeno quattro elementi. Questo vale anche per elenchi con solo due o tre elementi, che portano a spazi vuoti non intenzionali.

È possibile utilizzare JavaScript semplice per impostare automaticamente l' attributo size sul valore corretto, ad esempio vedere questo violino .

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

Come accennato in precedenza, questa soluzione non risolve il problema quando ci sono solo due o tre opzioni.

amici: se recuperi i dati da un DB: puoi chiamare questo $ registers = * _num_rows (Result_query) poi

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

Ho avuto questo requisito di recente e ho utilizzato altri post di questa domanda per creare questo script:

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

Per regolare la dimensione (altezza) di tutte le selezioni multiple al numero di opzioni, usa jQuery:

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

Puoi prima contare i tag delle opzioni, quindi impostare il conteggio per l'attributo size. Ad esempio, in PHP puoi contare l'array e quindi utilizzare un ciclo foreach per l'array.

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

La modalità di rendering di una casella di selezione è determinata dal browser stesso. Quindi ogni browser ti mostrerà l'altezza della casella di riepilogo delle opzioni in un'altra altezza. Non puoi influenzarlo. L'unico modo per cambiarlo è fare una selezione da zero.

Ecco un esempio di utilizzo del pacchetto, che è abbastanza popolare nella comunità 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' : ''),
]) !!}

Pacchetto: https://laravelcollective.com/