분명히 이것은 작동하지 않습니다.
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);
});답변
나는 질문이 오래되었다는 것을 알고 있지만 주제가 닫히지 않은 방법은 도움을 줄 것입니다.
“크기”속성은 문제를 해결합니다.
예:
<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입니다.
