ทำการเลือกหลายรายการเพื่อปรับความสูงให้พอดีกับตัวเลือกโดยไม่มีแถบเลื่อน

เห็นได้ชัดว่าสิ่งนี้ใช้ไม่ได้:

   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 ต่อไปนี้ (สมมติว่าคุณได้ให้รหัสการเลือกหลายรายการ):

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

การสาธิต: http://jsfiddle.net/AZEFU/

ฉันรู้ว่าคำถามเก่า แต่จะปิดหัวข้อได้อย่างไรฉันจะให้ความช่วยเหลือ

แอตทริบิวต์ "size" จะช่วยแก้ปัญหาของคุณได้

ตัวอย่าง:

<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" ส่วนใหญ่จะแสดงองค์ประกอบเลือกเริ่มต้น (แบบเลื่อนลง)
• การตั้งค่าแอตทริบิวต์ขนาดเป็นค่าที่มากกว่า "1" ส่วนใหญ่จะแสดงรายการการเลือกที่มีความสูงซึ่งสามารถแสดงรายการได้อย่างน้อยสี่รายการ นอกจากนี้ยังใช้กับรายการที่มีเพียงสองหรือสามรายการซึ่งนำไปสู่การเว้นวรรคโดยไม่ได้ตั้งใจ

สามารถใช้ JavaScript แบบง่ายเพื่อตั้งค่าแอตทริบิวต์ขนาดให้เป็นค่าที่ถูกต้องโดยอัตโนมัติเช่นดูซอนี้

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

ดังที่ได้กล่าวไว้ข้างต้นโซลูชันนี้ไม่สามารถแก้ปัญหาได้เมื่อมีเพียงสองหรือสามตัวเลือก

เพื่อน: ถ้าคุณดึงข้อมูลจากฐานข้อมูล: คุณสามารถเรียกสิ่งนี้ว่า $ register = * _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 loop สำหรับอาร์เรย์

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