스크롤 막대없이 옵션에 맞게 높이를 조정하려면 다중 선택을하십시오.

분명히 이것은 작동하지 않습니다.

   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가 필요없이 원하는 것을 수행합니다. 숨겨진 오버플로는 스크롤바를 없애고 자바 스크립트는 올바른 크기로 만듭니다.

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

그리고 약간의 자바 스크립트

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

jQuery의 경우 이것을 시도 할 수 있습니다. 나는 항상 다음을 수행하고 작동합니다.

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

Javascript / JQuery에서만이 작업을 수행 할 수 있습니다. 다음 JQuery로 수행 할 수 있습니다 (선택 항목에 다중 선택의 ID를 부여했다고 가정).

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

데모 : http://jsfiddle.net/AZEFU/

나는 질문이 오래되었다는 것을 알고 있지만 주제가 닫히지 않은 방법은 도움을 줄 것입니다.

"크기"속성은 문제를 해결합니다.

예:

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

select다음을 포함 할 수 있습니다 optgroup.

<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입니다.

간단한 자바 스크립트로이 작업을 수행 할 수 있습니다.

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

크기 속성을 사용하는 것이 가장 실용적인 솔루션이지만 두세 가지 옵션 만있는 요소 를 선택 하는 데 적용 할 때 단점이 있습니다.

• 크기 속성 값을 "0"또는 "1"로 설정하면 대부분 기본 선택 요소 (드롭 다운)가 렌더링됩니다.
• size 속성을 "1"보다 큰 값으로 설정하면 대부분 최소 4 개 항목을 표시 할 수있는 높이를 가진 선택 목록이 렌더링됩니다. 이는 2 개 또는 3 개의 항목 만있는 목록에도 적용되어 의도하지 않은 공백이 발생합니다.

간단한 JavaScript를 사용하여 크기 속성을 올바른 값으로 자동으로 설정할 수 있습니다 ( 예 : this fiddle 참조) .

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

위에서 언급했듯이이 솔루션은 두세 가지 옵션 만있는 경우 문제를 해결하지 못합니다.

친구 : 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)
})

먼저 옵션 태그를 계산 한 다음 크기 속성에 대한 개수를 설정할 수 있습니다. 예를 들어 PHP에서는 배열을 계산 한 다음 배열에 foreach 루프를 사용할 수 있습니다.

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

선택 상자가 렌더링되는 방식은 브라우저 자체에 의해 결정됩니다. 따라서 모든 브라우저는 옵션 목록 상자의 높이를 다른 높이로 표시합니다. 당신은 그것에 영향을 미칠 수 없습니다. 변경할 수있는 유일한 방법은 처음부터 직접 선택하는 것입니다.

다음은 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/