<SELECT multiple> - จะอนุญาตให้เลือกเพียงรายการเดียวได้อย่างไร?

137

ฉันมี<SELECT multiple>ฟิลด์ที่มีหลายตัวเลือกและฉันต้องการอนุญาตให้มีเพียงตัวเลือกเดียวที่เลือกในเวลาเดียวกัน แต่ผู้ใช้สามารถกดปุ่ม CTRL ค้างไว้และเลือกรายการเพิ่มเติมพร้อมกันได้

มีวิธีการทำอย่างไร? (ฉันไม่ต้องการลบ "หลายรายการ")

html html-select

— ซิมพอด
แหล่งที่มา

5

อะไร? ทำไม? สิ่งนี้ต้องการคำอธิบายเพิ่มเติม

— Dai

5

โดยไม่ใช้หลายรายการกับสิ่งที่คุณเลือก? :)

— GordonM

6

@GordonM ใช่ทั้งหมด: วันนี้ PI กำลังมองหาสิ่งเดียวกันเพราะฉันต้องการให้หลายรายการแสดง (ซึ่งโดยนัยกับmultipleแอตทริบิวต์) โดยไม่สามารถเลือกหลายรายการได้ ลืมไปว่ามีการเรียกแอตทริบิวต์ที่จะทำสิ่งนี้sizeดังนั้นคำตอบยอดนิยมจึงตอบสนองฉันได้ดี :)

— ลั

โดยส่วนตัวแล้วฉันมีช่องเลือกหลายช่องซึ่งฉันมีสี่ตัวเลือกและฉันต้องการให้สามตัวเลือกสามารถเลือกได้ แต่ตัวเลือกที่สี่ต้องอยู่คนเดียวถ้าเลือกเพราะมันจะปะทะกับอีกสามช่อง (3 ตัวเลือกและ "ไม่มี ")

— RWolfe

287

อย่ากำหนดให้เป็นการเลือกหลายรายการ แต่กำหนดขนาดให้เป็นเช่น:

  <select name="user" id="userID" size="3">
    <option>John</option>
    <option>Paul</option>
    <option>Ringo</option>
    <option>George</option>
  </select>

ตัวอย่างการทำงาน: https://jsfiddle.net/q2vo8nge/

— มาร์กอสปลาโคนา
แหล่งที่มา

เป็นไปได้ไหมที่จะนับจำนวนทั้งหมดของ <option> ในแอตทริบิวต์ size

— MyName

1

@Natasha คุณสามารถรับค่าของฟิลด์ขนาดโดยใช้ jquery :-)

— Vladimir verleg

1

ขนาดข้อมูลที่เกี่ยวข้อง:วางselectภายในdisplay: flexคอนเทนเนอร์และทำflex-grow: 1ตามselectจะทำให้ถือว่าsize="3"เป็นความสูงขั้นต่ำจากนั้นสแนปความสูงของทั้งหมดให้เลือกขนาดสูงสุดที่เป็นไปได้ภายในคอนเทนเนอร์ของคุณ jsfiddle.net/z1gypahs

— Torxed

25

หากผู้ใช้ควรเลือกเพียงหนึ่งตัวเลือกพร้อมกันเพียงแค่ลบ "หลาย" - ทำการเลือกตามปกติ:

  <select name="mySelect" size="3">
     <option>Foo</option>
     <option>Bar</option>
     <option>Foo Bar</option>
     <option>Bar Foo</option>
  </select>

ซอ

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

9

ทำไมคุณไม่ต้องการลบmultipleแอตทริบิวต์ จุดประสงค์ทั้งหมดของแอตทริบิวต์นั้นคือการระบุให้เบราว์เซอร์ทราบว่าสามารถเลือกค่าหลายค่าจากselectองค์ประกอบที่กำหนดได้ หากควรเลือกเพียงค่าเดียวให้ลบแอตทริบิวต์และเบราว์เซอร์จะทราบว่าอนุญาตให้เลือกเพียงค่าเดียว

ใช้เครื่องมือที่คุณมีนั่นคือสิ่งที่มีไว้เพื่อ

— เดวิด
แหล่งที่มา

2

อา. แอตทริบิวต์ขนาดยังทำงานแบบสแตนด์อโลน ไม่สังเกตเห็น ขอบคุณ

— simPod

7

@simPod เหตุผลเพราะมีหลายครั้งที่ลูกค้าต้องการเห็นตัวเลือกทั้งหมดที่อยู่ตรงหน้า แต่สามารถเลือกได้เพียง 1 ตัวเลือกเท่านั้น นานมากแล้วที่ฉันเขียน html "จริง" จนต้อง google / bing คำตอบ ... โอ้ขอบคุณสวรรค์สำหรับ StackOverflow ในบางวัน

— Richard B

1

คุณต้องการเพียงตัวเลือกเดียวตามค่าเริ่มต้น แต่ผู้ใช้สามารถเลือกได้หลายตัวเลือกโดยกดแป้น CTRL นี่คือ (แล้ว) ว่าตัวเลือกหลายตัวหมายถึงการทำงานอย่างไร

ดูนี่: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

คุณช่วยชี้แจงคำถามของคุณได้ไหม

— โคจิเซโร
แหล่งที่มา

ตอนนี้ฉันเข้าใจคำถามแล้วขอบคุณ Marcos Placona คำถามเริ่มต้นไม่ได้เป็นคำที่ดี

— Cogicero

แม้ว่าโดยส่วนตัวแล้วฉันคิดว่ามัน "ไม่ยุติธรรม" กับประสบการณ์ของผู้ใช้เมื่อคุณแสดงตัวเลือกการเลือกหลายรายการ แต่ผู้ใช้สามารถเลือกได้เพียงตัวเลือกเดียว

— Cogicero

1

ขึ้นอยู่กับสถานการณ์

— simPod

1

ฉันมาที่นี่หลังจากค้นหา Google และเปลี่ยนสิ่งที่สิ้นสุด

ดังนั้นฉันแค่เปลี่ยนตัวอย่างนี้และมันจะทำงานกับ jquery ในขณะรันไทม์

$('select[name*="homepage_select"]').removeAttr('multiple')

http://jsfiddle.net/ajayendra2707/ejkxgy1p/5/

— อาจาย์ 2707
แหล่งที่มา

4

โดยพื้นฐานแล้วคุณกำลังทำในสิ่งที่คำตอบที่ยอมรับกำลังทำอยู่ แต่ด้วยวิธีที่ซับซ้อน แทนที่จะลบแอตทริบิวต์หลายรายการในขณะทำงานคุณสามารถลบออกได้โดยตรงใน HTML jsfiddle.net/3rkk6m9a

— Harry

1

<select name="flowers" size="5" style="height:200px">
 <option value="1">Rose</option>
 <option value="2">Tulip</option>
</select>

วิธีง่ายๆนี้ช่วยให้คุณได้รับรายการตัวเลือกที่มองเห็นได้ แต่สามารถเลือกได้เพียงตัวเลือกเดียว

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

4

ยินดีต้อนรับสู่ SO กรุณาเพิ่มคำอธิบายแบบละเอียด

— Andriy Ivaneyko

1

ฉันมีข้อตกลงบางอย่างกับ select \ multi-select นี่คือสิ่งที่ทำให้ฉันเป็นเคล็ดลับ

<select name="mySelect" multiple="multiple">
    <option>Foo</option>
    <option>Bar</option>
    <option>Foo Bar</option>
    <option>Bar Foo</option>
</select>

— อีวาน
แหล่งที่มา

0

ตอบช้า แต่อาจช่วยคนอื่นได้นี่คือวิธีดำเนินการโดยไม่ต้องลบแอตทริบิวต์ "multiple"

$('.myDropdown').chosen({
    //Here you can change the value of the maximum allowed options
    max_selected_options: 1
});

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

หมายเหตุ: ต้องใช้ปลั๊กอิน jQuery Chosen: Harvesthq.github.io/chosen

— smolo