複数選択して、スクロールバーなしでオプションに合わせて高さを調整します

どうやらこれは動作しません：

   select[multiple]{
     height: 100%;
   }

選択するとページの高さが100％になります...

auto どちらも機能しませんが、垂直スクロールバーが表示されます。

他のアイデアはありますか？

私はあなたがsize属性を使用できると思います。最近のすべてのブラウザで動作します。

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

タグのsize属性を使用してこれを行うことができますselect。8つのオプションがあるとすると、次のようになります。

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

古いですが、これはjqueryを必要とせずにあなたが望んでいることを行います。非表示のオーバーフローはスクロールバーを取り除き、JavaScriptはそれを適切なサイズにします。

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

そしてほんの少しのJavaScript

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

jQueryの場合、これを試すことができます。私は常に次のことを行い、うまくいきます。

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

これはJavascript / JQueryでのみ実行できます。次のJQueryを使用して実行できます（selectにmultiselectのIDを指定した場合）。

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

デモ：http : //jsfiddle.net/AZEFU/

質問が古いのはわかっていますが、トピックが閉じられていないので、私は手伝います。

属性「サイズ」は問題を解決します。

例：

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

selectoptgroupそれぞれに1行かかるものを含めることができます。

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

この例では合計sizeは(1+1)+(1+2)=5です。

あなたは簡単なjavascriptでこれを行うことができます...

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

...またはレコード数まで高さを制限...

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

スクロールバーを削除するには、次のCSSを追加します。

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

これがスニペットです：

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属性を使用することが最も実用的なソリューションですが、2つまたは3つのオプションのみを持つ要素を選択するために適用する場合、問題があります。

• サイズ属性値を「0」または「1」に設定すると、ほとんどの場合、デフォルトの選択要素（ドロップダウン）がレンダリングされます。
• サイズ属性を「1」より大きい値に設定すると、ほとんどの場合、少なくとも4つの項目を表示できる高さの選択リストがレンダリングされます。これは、アイテムが2つまたは3つしかないリストにも当てはまり、意図しない空白が生じます。

単純なJavaScriptを使用して、サイズ属性を正しい値に自動的に設定できます。たとえば、このフィドルを参照してください。

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

上記のように、このソリューションは、2つまたは3つのオプションしかない場合の問題を解決しません。

フレンズ：DBからデータを取得する場合：これを$ registers = * _num_rows（Result_query）と呼ぶことができます。

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

最近この要件があり、この質問の他の投稿を使用してこのスクリプトを作成しました：

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

すべての複数選択のサイズ（高さ）をオプションの数に調整するには、jQueryを使用します。

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

選択ボックスのレンダリング方法は、ブラウザ自体によって決定されます。したがって、すべてのブラウザーでオプションリストボックスの高さが別の高さに表示されます。あなたはそれに影響を与えることはできません。変更できる唯一の方法は、最初から独自に選択することです。

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' : ''),
]) !!}

パッケージ：https : //laravelcollective.com/