วิธีสร้าง listbox ใน HTML โดยไม่อนุญาตให้เลือกหลายรายการ

98

ฉันไม่มีประสบการณ์ใน HTML มากนัก ฉันต้องการสร้างลิสต์บ็อกซ์ง่ายๆ แต่ข้อกำหนดอย่างหนึ่งคือการยกเลิกการเลือกหลายรายการ รหัสส่วนใหญ่สำหรับ listboxes เป็นแบบนี้ -

 <select name="sometext" multiple="multiple">
    <option>text1</option>
    <option>text2</option>
    <option>text3</option>
    <option>text4</option>
    <option>text5</option>
 </select>

แต่อนุญาตให้เลือกได้หลายแบบ

ที่นี่มีการถามคำถามที่คล้ายกัน แต่คำตอบที่ "ดีที่สุด" ถูกลดลง ดังนั้นฉันไม่แน่ใจว่าจะทำได้อย่างไร กรุณาช่วย.

html listbox

— CodeBlue
แหล่งที่มา

5

สำหรับคุณที่มาใหม่โปรดหลีกเลี่ยงเว็บไซต์ดังกล่าวข้างต้นเพื่อประโยชน์ของคุณเองพวกเขามี SEO ที่ดี แต่ก็เกี่ยว มันเต็มไปด้วยการปฏิบัติและนิสัยที่ไม่ดีคุณจะต้องเสียใจที่ได้เรียนรู้ในภายหลัง ใช้ API จาก MDN (Mozilla) ในกรณีนี้developer.mozilla.org/en-US/docs/Web/HTML/Element/select

— เบ็น

3

@ สตีฟขอบคุณสำหรับคำเตือน ความคิดเห็นของเขา "นี่คือเหตุผลที่ฉันมีงานทำ" ดูเหมือนว่าหยิ่งเกินไป ถ้าคุณมีงานทำดีสำหรับคุณ นี่คือเวทีสำหรับคำตอบไม่ใช่โฆษณา

— CodeBlue

172

เพียงใช้แอตทริบิวต์ขนาด:

<select name="sometext" size="5">
  <option>text1</option>
  <option>text2</option>
  <option>text3</option>
  <option>text4</option>
  <option>text5</option>
</select>

เพื่อความชัดเจนการเพิ่มแอตทริบิวต์ขนาดไม่ได้ลบการเลือกหลายรายการ

การเลือกรายการเดียวใช้งานได้เนื่องจากคุณลบแอตทริบิวต์ multiple = "multiple"

การเพิ่มแอตทริบิวต์ size = "5" ยังคงเป็นความคิดที่ดีหมายความว่าต้องแสดงอย่างน้อย 5 บรรทัด ดูข้อมูลอ้างอิงฉบับเต็มได้ที่นี่

— aaroncatlin
แหล่งที่มา

2

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

— aaroncatlin

อาจถูกลดลงเนื่องจากไม่มีสิ่งใดในมาตรฐาน HTML ที่กำหนดให้เบราว์เซอร์แสดงเป็น listbox หากมีการตั้งค่าแอตทริบิวต์ขนาด ใช่เบราว์เซอร์หลักทั้งหมดทำอยู่ในขณะนี้ แต่ไม่มีการรับประกันว่าจะทำได้เสมอไป ตามความเป็นจริงแล้วนี่จะเป็นการเปลี่ยนแปลงที่ผิดปกติสำหรับเว็บไซต์จำนวนมากไม่มีเบราว์เซอร์ใดที่จะเปลี่ยนได้

— Elezar

1

มาตรฐานเปิดกว้างสำหรับการตีความเล็กน้อย: "ขนาดการแสดงผลขององค์ประกอบที่เลือกเป็นผลมาจากการใช้กฎสำหรับการแยกวิเคราะห์จำนวนเต็มที่ไม่เป็นลบกับค่าของแอตทริบิวต์ขนาดขององค์ประกอบหากมีอย่างใดอย่างหนึ่งและแยกวิเคราะห์ได้สำเร็จ" ในขณะที่สิ่งนี้ไม่ได้ระบุโดยเฉพาะว่าควรจะแสดงเป็น Dropdown หรือ Listbox แต่การแสดงตัวควบคุมแบบดร็อปดาวน์ซึ่งแสดงมากกว่า 1 องค์ประกอบก็ทำได้ยาก ( html.spec.whatwg.org/#the-select-element )

— aaroncatlin

ขอบคุณ !! และนี่อาจเป็นแบบไดนามิกอย่างเห็นได้ชัดด้วย Js: D

— Jcc.Sanabria

57

ลบแอตทริบิวต์ multiple = "multiple" และเพิ่ม SIZE = 6 ด้วยจำนวนองค์ประกอบที่คุณต้องการ

คุณอาจต้องการตรวจสอบไซต์นี้

http://www.htmlcodetutorial.com/forms/_SELECT.html

— Pollirrata
แหล่งที่มา

2

สำหรับ Asp.Net MVC

@Html.ListBox("parameterName", ViewBag.ParameterValueList as MultiSelectList, 
 new { 
 @class = "chosen-select form-control"
 })

หรือ

  @Html.ListBoxFor(model => model.parameterName,
  ViewBag.ParameterValueList as MultiSelectList,
   new{
       data_placeholder = "Select Options ",
       @class = "chosen-select form-control"
   })

— เดชานีธารากา
แหล่งที่มา