ความสูงของกล่องเลือก HTML (แบบเลื่อนลง)

มีคนยืนยันได้หรือไม่ว่าไม่สามารถเปลี่ยนความสูงของรายการแบบเลื่อนลงที่แสดงเมื่อคุณคลิกที่ช่องเลือก

แอตทริบิวต์ขนาดของการเลือกทำให้ดูเหมือนรายการแอตทริบิวต์ความสูงใน CSS ไม่ได้ผลดีเช่นกัน

ได้รับการยืนยัน

ส่วนที่ลดลงถูกตั้งค่าเป็น:

1. ความสูงที่จำเป็นในการแสดงรายการทั้งหมดหรือ
2. ความสูงที่จำเป็นในการแสดงxรายการ (มีแถบเลื่อนเพื่อดูที่เหลือ) ที่xเป็น
   • 20 ใน Firefox และ Chrome
   • 30 ใน IE 6, 7, 8
   • 16 สำหรับ Opera 10
   • 14 สำหรับ Opera 11
   • 22 สำหรับ Safari 4
   • 18 สำหรับ Safari 5
   • 11 ใน IE 5.0, 5.5
3. ใน IE / Edge หากไม่มีตัวเลือกรายการช่องว่าง 11 รายการที่สูงอย่างโง่เขลา

สำหรับ (3) ด้านบนคุณสามารถดูผลลัพธ์ได้ในJSFiddleนี้

ฉันกำลังทำงานกับปลั๊กอิน jquery ทดแทนแบบเลื่อนลงเพื่อต่อสู้กับปัญหานี้ ในฐานะของโพสต์นี้ก็เกือบจะแยกไม่ออกจากแบบเลื่อนลงพื้นเมืองในแง่ของรูปลักษณ์และฟังก์ชั่น

นี่คือตัวอย่าง (รวมถึงลิงค์สำหรับดาวน์โหลด): http://programmingdrunk.com/current-projects/dropdownReplacement/

นี่คือหน้าโครงการของปลั๊กอิน:

http://plugins.jquery.com/project/dropdownreplacement

(อัปเดต :) ดูเหมือนว่าหน้าปลั๊กอิน jquery จะไม่ทำงานอีกต่อไป ฉันอาจจะไม่ใส่ปลั๊กอินของฉันในไซต์ใหม่ของพวกเขาเมื่อมันใช้งานได้ดังนั้นอย่าลังเลที่จะใช้ลิงค์ programmingdrunk.com สำหรับการสาธิต / ดาวน์โหลด

NO ไม่สามารถเปลี่ยนความสูงของเมนูแบบเลื่อนลงที่เลือกได้เนื่องจากคุณสมบัตินั้นเป็นคุณสมบัติเฉพาะของเบราว์เซอร์

อย่างไรก็ตามหากคุณต้องการฟังก์ชันนั้นก็มีตัวเลือกมากมาย คุณสามารถใช้ bootstrap dropdown-menuและกำหนดmax-heightคุณสมบัติได้ อะไรทำนองนี้.

$('.dropdown-menu').on( 'click', 'a', function() {
    var text = $(this).html();
    var htmlText = text + ' <span class="caret"></span>';
    $(this).closest('.dropdown').find('.dropdown-toggle').html(htmlText);
});

.dropdown-menu {
    max-height: 146px;
    overflow: scroll;
    overflow-x: hidden;
    margin-top: 0px;
}

.caret {
	  float: right;
    margin-top: 5%;
}

#menu1 {
    width: 160px; 
    text-align: left;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   
<div class="container" style="margin:10px">
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1">
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a></li>
      <li><a href="#">JavaScript</a></li>
      <li><a href="#">About Us</a></li>
    </ul>
  </div>
</div>

จริงๆแล้วคุณทำได้! ไม่ต้องยุ่งยากกับ javascript ... ฉันติดอยู่กับสิ่งเดียวกันกับเว็บไซต์ที่ฉันกำลังสร้างและหากคุณเพิ่มแอตทริบิวต์ "ขนาดตัวอักษร" ใน CSS สำหรับแท็กก็จะเพิ่มความสูงโดยอัตโนมัติเช่นกัน เล็ก ๆ น้อย ๆ แต่เป็นสิ่งที่รบกวนจิตใจฉันมากฮ่า ๆ

นี่ไม่ใช่วิธีแก้ปัญหาที่สมบูรณ์แบบ แต่ใช้ได้ผลดี

ในแท็กเลือกให้ใส่แอตทริบิวต์ต่อไปนี้โดยที่ "n" คือจำนวนแถวแบบเลื่อนลงที่จะมองเห็นได้

<select size="1" position="absolute" onclick="size=(size!=1)?n:1;" ...>

มีปัญหาสามประการในการแก้ปัญหานี้ 1) มีการแฟลชอย่างรวดเร็วขององค์ประกอบทั้งหมดที่แสดงระหว่างการคลิกเมาส์ครั้งแรก 2) ตำแหน่งถูกตั้งค่าเป็น 'สัมบูรณ์' 3) แม้ว่าจะมีรายการน้อยกว่า 'n' ช่องแบบเลื่อนลงจะยังคงเป็นขนาดของรายการ 'n'

จิแถวคำตอบคือตัวเลือกที่ดีสำหรับปัญหา แต่ฉันได้พบข้อผิดพลาดที่ฉันonclickมีปากเสียง แต่จะเป็น:

<select size="1" position="absolute" onclick="size=(size!=1)?1:n;" ...>

(และคุณต้องแทนที่ " n " ด้วยจำนวนบรรทัดที่คุณต้องการ)

คุณสามารถเปลี่ยนความสูงของหนึ่ง อย่าใช้height="500"(เป็นเพียงตัวเลขตัวอย่าง) ใช้สไตล์. คุณสามารถใช้<style>แท็กหรือใช้สิ่งนี้:

<!DOCTYPE html>
<html>
<body>
  <select id="option" style="height: 100px;">
    <option value="1">Option 1
    <option value="2">Option 2
  </select>
</body>
</html>

ฉันเน้นการเปลี่ยนแปลง:

  <select id="option" style="height: 100px;">

และดียิ่งขึ้น ...

style="height: 100px;">

คุณเห็นไหม?

กรุณาโหวตถ้ามันมีประโยชน์!