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

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

---

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

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

---

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

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

... 또는 레코드 수까지 높이 제한 ...

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

---

친구 : DB에서 데이터를 검색하는 경우 : $ registers = * _num_rows (Result_query) 다음을 호출 할 수 있습니다.

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

---

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

• Setting the size attribute value to "0" or "1" will mostly render a default select element (dropdown).
• Setting the size attribute to a value greater than "1" will mostly render a selection list with a height capable of displaying at least four items. This also applies to lists with only two or three items, leading to unintended white-space.

Simple JavaScript can be used to set the size attribute to the correct value automatically, e.g. see this fiddle.

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

As mentioned above, this solution does not solve the issue when there are only two or three options.

---

I had this requirement recently and used other posts from this question to create this script:

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

---

To adjust the size (height) of all multiple selects to the number of options, use jQuery:

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

---

스크롤바를 제거하려면 다음 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>

---

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

참고 URL : https://stackoverflow.com/questions/9943886/make-multiple-select-to-adjust-its-height-to-fit-options-without-scroll-bar