ฉันสามารถใช้แอททริบิวที่ต้องการกับฟิลด์ <select> ใน HTML5 ได้ไหม?

256

ฉันจะตรวจสอบได้อย่างไรว่าผู้ใช้เลือกบางสิ่งจาก<select>ฟิลด์ใน HTML5 หรือไม่

ฉันเห็นว่า<select>ไม่รองรับrequiredคุณสมบัติใหม่... ฉันต้องใช้ JavaScript หรือไม่ หรือมีบางอย่างที่ฉันขาดหายไป? : /

— ด้าน
แหล่งที่มา

1

หากคุณสนใจในความเข้ากันได้ข้ามเบราว์เซอร์ในระดับใดคุณอาจต้องใช้ JavaScript selectedIndexแอตทริบิวต์ที่คุณต้องการเป็น

— Luke Sneeringer

4

ตามร่างของบรรณาธิการปัจจุบันของข้อกำหนด HTML5 (6 ส.ค. 2554) องค์ประกอบที่เลือกจะมีแอตทริบิวต์ที่จำเป็น "แอตทริบิวต์ที่จำเป็นคือแอตทริบิวต์บูลีนเมื่อระบุผู้ใช้จะต้องเลือกค่าก่อนส่งแบบฟอร์ม" dev.w3.org/html5/spec/Overview.html#the-select-element

— james.garriss

471

จำเป็น : มีค่าแรกที่ว่างเปล่า - จำเป็นต้องใช้กับค่าที่ว่างเปล่า

สิ่งที่ต้องทำก่อน : แก้ไข html5 DOCTYPE และฟิลด์อินพุตที่มีชื่อ

<select name="somename" required>
<option value="">Please select</option>
<option value="one">One</option>
</select>

ตามเอกสาร (รายชื่อและตัวหนาเป็นของฉัน)

คุณลักษณะที่จำเป็นคือแอตทริบิวต์บูลีน
เมื่อระบุผู้ใช้จะต้องเลือกค่าก่อนส่งแบบฟอร์ม

หากเลือกองค์ประกอบ

มีการระบุแอตทริบิวต์ที่ต้องการ

ไม่ได้ระบุแอตทริบิวต์หลายรายการ

และมีขนาดจอแสดงผลเป็น 1 (ไม่ต้องมี SIZE = 2 หรือมากกว่า - ละเว้นหากไม่ต้องการ)

และถ้าค่าขององค์ประกอบตัวเลือกแรกในรายการตัวเลือกขององค์ประกอบตัวเลือก (ถ้ามี) คือสตริงว่าง (เช่นมีอยู่value="")

และโหนดหลักขององค์ประกอบตัวเลือกนั้นเป็นองค์ประกอบที่เลือก (และไม่ใช่องค์ประกอบ optgroup)

ดังนั้นตัวเลือกนั้นเป็นตัวเลือกป้ายกำกับตัวแทนองค์ประกอบของตัวเลือก

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

27

นอกจากนี้เพื่อให้ผู้ใช้ไม่สามารถเลือกตัวเลือกที่ไม่ใช่ตัวเลือกได้เมื่อถูกเลือกแล้ว: <ตัวเลือกที่เลือก = "เลือก" พิการ = "ปิดการใช้งาน" ค่า = ""> กรุณาเลือก </option>

— CoolAJ86

2

ไม่เหมาะสม ... และมันจะไม่ทำงานบนเบราว์เซอร์หลายตัว

— mplungjan

4

@ CoolAJ86 ใช้งานได้ใน Chrome 23, Firefox 16 และ IE 10 เช่นกัน

— KTB

15

ฉันเห็น 2 downvotes หากคุณรู้สึกว่าการ downvoting โปรดแสดงความคิดเห็นว่าทำไม

— mplungjan

1

การถอดความของเอกสารมีประโยชน์มาก ขอบคุณ

— skia.heliou

13

<select>องค์ประกอบไม่สนับสนุนrequiredแอตทริบิวต์ตามข้อมูลจำเพาะ:

http://dev.w3.org/html5/spec-author-view/the-select-element.html#the-select-element

เบราว์เซอร์ใดที่ไม่ให้เกียรติสิ่งนี้

(แน่นอนคุณต้องตรวจสอบความถูกต้องของเซิร์ฟเวอร์เนื่องจากคุณไม่สามารถรับประกันได้ว่าผู้ใช้จะเปิดใช้งาน JavaScript)

— Paul D. Waite
แหล่งที่มา

8

ฉันแน่ใจว่าเขาต้องการค่า = "" ในรายการแรก - หากไม่มีค่าแอตทริบิวต์หรือค่าในตัวเลือกทั้งหมดที่จำเป็นในการทริกเกอร์เนื่องจากการเลือกส่งคืนค่าจริง

— mplungjan

1

@mplungjan: อ่า gotcha - ด่างดี

— Paul D. Waite

1

@ PaulD.Waite เรายังไม่สามารถรับประกันได้ว่าผู้ใช้จะเปิดใช้งาน Javascript หรือไม่? ฉันเพิ่งพัฒนาเว็บมาประมาณ 2 ปีแล้วและฉันไม่เคยเจอปัญหานี้เลย

— user137717

2

@ user137717: มันเป็นเว็บ คุณไม่สามารถรับประกันอะไร แน่นอนคุณสามารถตัดสินใจได้ว่ามันไม่คุ้มค่าสำหรับการจัดเลี้ยง

— Paul D. Waite

5

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

ใน Javascript คุณสามารถตรวจสอบselectedIndexคุณสมบัติเพื่อรับดัชนีของตัวเลือกที่เลือกหรือคุณสามารถตรวจสอบvalueคุณสมบัติเพื่อรับค่าของตัวเลือกที่เลือก

ตามข้อมูลจำเพาะของ HTML5 selectedIndex"จะส่งคืนดัชนีของรายการที่เลือกแรกถ้ามีหรือ −1 หากไม่มีรายการที่เลือกและvalue" ส่งคืนค่าของรายการแรกที่เลือกถ้ามีหรือสตริงว่างถ้ามี ไม่มีรายการที่เลือก "ถ้าเลือกInIndex = -1 คุณจะรู้ว่าพวกเขาไม่ได้เลือกอะไรเลย

<button type="button" onclick="displaySelection()">What did I pick?</button>
<script>
    function displaySelection()
    {
        var mySelect = document.getElementById("someSelectElement");
        var mySelection = mySelect.selectedIndex;
        alert(mySelection);
    }
</script>

— james.garriss
แหล่งที่มา

1

@Apostle - โปรดหยุดพยายามเปลี่ยนคำตอบนี้ผ่านการแก้ไข หากคุณเชื่อว่ามันไม่ถูกต้องอย่าลังเลที่จะออกคำตอบของคุณเอง

— Brad Larson

@BradLarson ในตอนแรกฉันไม่ค่อยเข้าใจ: รหัสไม่ใช่คำตอบที่สมบูรณ์ของปัญหาในคำถามนี้หรือเป็นตัวอย่างที่อธิบายถึงย่อหน้าสุดท้ายของคำตอบนี้ อาจเป็นที่สองในกรณีนี้ -1ฉันคิดว่าดีกว่าที่จะจัดระเบียบรหัสนี้เป็นข้อมูลเท่านั้นและแสดงผล ขออภัยฉันไม่ได้ชี้แจงในความคิดเห็นก่อน

— อัครสาวก

5

ใช่มันทำงานได้:

<select name="somename" required>
     <option value="">Please select</option>
     <option value="one">One</option>
</select>

คุณต้องเว้นตัวเลือกแรกไว้ก่อน

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

1

<form action="">

<select required>

  <option selected disabled value="">choose</option>
  <option value="red">red</option>
  <option value="yellow">yellow</option>
  <option value="green">green</option>
  <option value="grey">grey</option>

</select>
<input type="submit">
</form>

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

3

คำตอบนี้ทำซ้ำตัวอย่างก่อนหน้าโดยไม่มีคำอธิบายเพิ่มเติม

— james.garriss

1

ก่อนอื่นคุณต้องกำหนดค่าว่างในตัวเลือกแรก เช่นเลือกที่นี่จำเป็นต้องใช้งานเท่านั้น

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

0

ทำให้ค่าของรายการแรกของการเลือกกล่องว่างเปล่า

ดังนั้นเมื่อคุณโพสต์แบบฟอร์มทุกครั้งคุณจะได้รับค่าว่างและใช้วิธีนี้คุณจะรู้ว่าผู้ใช้นั้นไม่ได้เลือกอะไรจากการเลื่อนลง

<select name="user_role" required>
    <option value="">-Select-</option>
    <option value="User">User</option>
    <option value="Admin">Admin</option>
</select>

— santosh devnath
แหล่งที่มา

0

คุณต้องตั้งค่าvalueคุณสมบัติของoptionสตริงว่าง:

<select name="status" required>
    <option selected disabled value="">what's your status?</option>
    <option value="code">coding</option>
    <option value="sleep">sleeping</option>
</select>

selectจะกลับvalueจากที่เลือกoptionไปยังเซิร์ฟเวอร์เมื่อผู้ใช้กดบนsubmit formค่าว่างvalueนั้นเหมือนกับtextอินพุตว่าง-> กำลังเพิ่มrequiredข้อความ

w3schools

แอตทริบิวต์ value ระบุค่าที่จะส่งไปยังเซิร์ฟเวอร์เมื่อมีการส่งแบบฟอร์ม

ตัวอย่าง

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

0

ลองสิ่งนี้จะได้ผลฉันได้ลองและใช้งานได้แล้ว

<!DOCTYPE html>
<html>
<body>

<form action="#">
<select required>
  <option value="">None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>
<input type="submit">
</form>

</body>
</html>

— tabrez พูด
แหล่งที่มา

0

ทำงานได้อย่างสมบูรณ์แบบหากค่าตัวเลือกแรกเป็นโมฆะ คำอธิบาย: HTML5 จะอ่านค่า Null บนปุ่มส่ง ถ้าไม่ใช่โมฆะ (แอตทริบิวต์ค่า) ค่าที่เลือกจะถือว่าไม่เป็นโมฆะดังนั้นการตรวจสอบจะทำงานเช่นโดยการตรวจสอบว่ามีข้อมูลในแท็กตัวเลือก ดังนั้นมันจะไม่สร้างวิธีการตรวจสอบ อย่างไรก็ตามฉันเดาว่าอีกด้านหนึ่งจะกลายเป็นชัดเจนถ้าแอตทริบิวต์ค่าถูกตั้งค่าเป็นโมฆะเช่น (value = ""), HTML5 จะตรวจสอบค่าว่างในตัวเลือกแรกหรือมากกว่าตัวเลือกเริ่มต้นที่ทำให้ข้อความการตรวจสอบ ขอบคุณที่ถาม. ยินดีที่ได้ช่วย. ดีใจที่รู้ว่าฉันทำ

— Kudzai Machiridza
แหล่งที่มา

-1

ใน html5 คุณสามารถใช้นิพจน์แบบเต็มได้:

<select required="required">

ฉันไม่รู้ว่าทำไมการแสดงออกสั้น ๆ ใช้ไม่ได้ แต่ลองทำสิ่งนี้ มันจะแก้ปัญหา

— Roger Rocco
แหล่งที่มา

-4

ลองสิ่งนี้

<select>
<option value="" style="display:none">Please select</option>
<option value="one">One</option>
</select>

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

-6

คุณสามารถทำได้ด้วย JQuery

ตั้งค่าที่จำเป็น

$("#select1").attr('required', 'required');

ลบที่จำเป็น

$("#select1").removeAttr('required');

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