web-dev-qa-db-ja.com

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

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

   select[multiple]{
     height: 100%;
   }

selectのページの高さが100％になります...

autoも機能せず、垂直スクロールバーが表示されます。

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

enter image description here

htmlcsshtml-select
86
Alex

size属性を使用できると思います。最近のすべてのブラウザーで動作します。

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

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

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

古いですが、これは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;
26
Jarrod

JQueryの場合、これを試すことができます。私は常に以下を行い、それは動作します。

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

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

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

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

9
mattytommo

質問は古いことは知っていますが、トピックがどのように閉じられていないかを知りたいと思います。

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

例：

<select name="courses" multiple="multiple" size="30">
5
Victor
<select id="list">
  <optgroup label="Group">
    <option value="1">1</option>
  </optgroup>
</select>
<script>
  const l = document.getElementById("list")
  l.setAttribute("size", l.childElementCount + l.length)
</script>

https://jsfiddle.net/maars/ou5f3jzy/

5
Andrii Nemchenko

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

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

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

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

size属性を使用することが最も実用的なソリューションですが、select2つまたは3つのオプションのみを持つ要素。

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

シンプルなJavaScriptを使用して、size属性を正しい値に自動的に設定できます。 this fiddle を参照してください。

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

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

1
Werner

friends：DBからdeデータを取得する場合：これを呼び出すことができます$ registers = * _num_rows（Result_query）then

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

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

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

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

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

スクロールバーを削除するには、次の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>
0
MiXT4PE