458

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

ฉันไม่สามารถใช้สิ่งนี้

<select>
  <option></option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

ขยายตัวอย่างข้อมูล

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

html

— Pankaj Parashar
แหล่งที่มา

2

เท่าที่ฉันรู้ว่านี่เป็นวิธีเดียวที่จะได้รับบรรทัดว่างเปล่า คุณหมายความว่าคุณจะต้องทำการตรวจสอบ? เพียงตั้งค่าการตรวจสอบเพื่อบอกว่า value = "" แล้วส่งคืนค่าเท็จ

— Robert

1

นี่จะเป็นโอกาสที่ดีในการใช้ปุ่มตัวเลือกแทนที่จะเป็นแบบเลื่อนลง

— Blazemonger

9

ไม่ใช่ความต้องการแปลก ๆ เลยในความคิดของฉัน ฉันอยู่ในเรือลำเดียวกัน ฉันต้องการค่าเริ่มต้น 'ไม่มีตัวเลือก' เช่นกัน ฉันมีรายการแบบหล่นลงที่ไม่จำเป็นต้องส่งแบบฟอร์ม การปิดใช้งานพวกเขาในลักษณะนี้ทำให้ผู้ใช้ไม่ต้องเลือกเมื่อไม่เกี่ยวข้อง คำถามที่ดี! +1

— สกอตต์

ไม่ใช่ข้อกำหนดแปลก ๆ หาก SELECT มีคุณสมบัติที่จำเป็นต้องมีตัวเลือกป้ายกำกับตัวยึดตำแหน่งเป็นข้อกำหนดของ HTML5 dev.w3.org/html5/spec-preview/ ......

— Testo Testini

ปุ่มตัวเลือก @Blazemonger เป็นความคิดที่แย่มากถ้าคุณมีมากกว่า 3 หรือ 4 ลองนึกภาพรายการแบบหล่นลงที่มี 15 ตัวเลือกหรือมากกว่า 50 รายการ ผู้ที่มีปัญหาเกี่ยวกับการออกแบบของตัวเองในหลาย ๆ กรณี แต่ปัญหายังคงยืนอยู่ที่ปุ่มไม่ได้ระดับดีที่ทุกคน

— TylerH

1014

บางทีนี่อาจจะเป็นประโยชน์

<select>
    <option disabled selected value> -- select an option -- </option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

-- select an option --จะแสดงตามค่าเริ่มต้น แต่ถ้าคุณเลือกตัวเลือกคุณจะไม่สามารถเลือกได้

คุณสามารถซ่อนโดยใช้การเพิ่มที่ว่างเปล่า option

<option style="display:none">

ดังนั้นมันจะไม่ปรากฏในรายการอีกต่อไป

ตัวเลือก 2

หากคุณไม่ต้องการที่จะเขียน CSS และคาดหวังว่าพฤติกรรมเดียวกันของการแก้ปัญหาข้างต้นเพียงแค่ใช้:

<option hidden disabled selected value> -- select an option -- </option>

— กลเม็ด
แหล่งที่มา

15

นี่คือ JSFiddle ด้านบนในกรณีที่ทุกคนต้องการมัน

— Uwe Keim

26

@azerafati เป็น @Rafael_Mori ชี้ให้เห็นว่าคุณสามารถเก็บถาวรได้โดยใช้แอตทริบิวต์ "hidden" ดังนั้นไม่จำเป็นต้องใช้ CSS เพียงแค่บริสุทธิ์ HTML5;)<option hidden disabled selected value> -- select an option -- </option>

— BrainOverflow

ถ้าฉันต้องการเลือกกลับ ฉันแค่ไม่ต้องการให้ส่งอะไร เป็นไปได้ไหม?

— Michael Rogers

1

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

— S. Domeng

ระวังทั้งคุณลักษณะที่ซ่อนอยู่และสไตล์การแสดงผลไม่ทำงานใน IE แม้แต่ 11 stackoverflow.com/questions/58862242/ …

— yatskovsky

113

คุณสามารถใช้ Javascript เพื่อให้บรรลุสิ่งนี้ ลองรหัสต่อไปนี้:

HTML

<select id="myDropdown">      
    <option>Option 1</option>     
    <option>Option 2</option>     
    <option>Option 3</option>     
</select>

JS

document.getElementById("myDropdown").selectedIndex = -1;

หรือ JQuery

$("#myDropdown").prop("selectedIndex", -1);

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

โซลูชันนี้ใช้งานได้กับ Chrome 35 บางส่วน: รายการแบบหล่นลงจะไม่แสดงรายการใด ๆ เมื่อมองไม่เห็นรายการตัวเลือก แต่แสดงตัวเลือกแรกที่เลือกเมื่อรายการตัวเลือกปรากฏขึ้น Safari 7 ทำงานตามที่ตั้งใจไว้

— flochtililoch

สิ่งที่น่าสนใจคือ: ใช้งานได้กับการตรวจสอบแบบฟอร์ม HTML หากคุณใช้แอrequiredททริบิวในselectองค์ประกอบและส่งโดยไม่เลือกตัวเลือกการตรวจสอบแบบฟอร์มจะล้มเหลวและแจ้งให้คุณทราบคุณต้องทำการเลือก ดังนั้นฉันชอบวิธีนี้มาก (ทดสอบอย่างน้อยใน Chrome)

— Andreas Linnert

ใช้งานไม่ได้ (อย่างน้อยในเบราว์เซอร์ปัจจุบันตามที่เขียนนี้ - และไม่จำเป็นต้องใช้ JavaScript

— silentmouth

1

ตั้งแต่ปี 2019 มีเพียง Safari IOS 10 ที่ปฏิเสธที่จะเล่นบอลกับเกมนี้

— Ayyash

36

วันนี้ (2015-02-25)

นี่เป็น HTML5 ที่ถูกต้องและส่งช่องว่าง (ไม่ใช่ช่องว่าง) ไปยังเซิร์ฟเวอร์:

<option label=" "></option>

ตรวจสอบความถูกต้องในhttp://validator.w3.org/check

ตรวจสอบพฤติกรรมของ Win7 (IE11 IE10 IE9 IE8 FF35 Safari5.1) Ubuntu14.10 (Chrome40, FF35) OSX_Yosemite (Safari8, Chrome40) Android (Samsung-Galaxy-S5)

ต่อไปนี้จะผ่านการตรวจสอบความถูกต้องในวันนี้แต่ผ่านอักขระช่องว่างบางชนิดเช่นกันจากเซิร์ฟเวอร์จากเบราว์เซอร์ส่วนใหญ่ (อาจไม่ต้องการ) และเว้นว่างไว้ในที่อื่น ๆ (Chrome40 / Linux ผ่านช่องว่าง):

<option>&#160;</option>

ก่อนหน้านี้ (2013-08-02)

ตามบันทึกของฉันเอนทิตีแบบไม่ทำลายพื้นที่ภายในแท็กตัวเลือกที่แสดงด้านบนสร้างข้อผิดพลาดต่อไปนี้ในปี 2013:

ข้อผิดพลาด: บริการการตรวจสอบความถูกต้องของมาร์กอัป W3C (สาธารณะ): องค์ประกอบตัวเลือกลูกแรกขององค์ประกอบที่เลือกที่มีแอตทริบิวต์ที่ต้องการและไม่มีแอตทริบิวต์หลายรายการและมีขนาดเท่ากับ 1 ต้องมีแอตทริบิวต์ค่าว่างหรือต้องไม่มีเนื้อหาข้อความ

ในเวลานั้นพื้นที่ปกติเป็น XHTML4 ที่ถูกต้องและส่งช่องว่าง (ไม่ใช่ที่ว่าง) ไปยังเซิร์ฟเวอร์จากเบราว์เซอร์ทุกตัว:

<option> </option>

อนาคต

มันจะทำให้ใจของฉันดีใจถ้า spec ได้รับการปรับปรุงเพื่อให้ตัวเลือกที่ว่างเปล่าอย่างชัดเจน ควรใช้ไวยากรณ์ที่สั้นที่สุด อย่างใดอย่างหนึ่งต่อไปนี้จะดี:

<option />
<option></option>

ไฟล์ทดสอบ

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <title>Test</title>
</head>
<body>
  <form action="index.html" method="post">
    <select name="sel">
      <option label=" "></option>
    </select>
  </form>
</body>
</html>

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

15

<td><b>Ação da atividade:</b><br>
	<select style='align:left; width:100%;' id='cbxTipoSFA' name='cbxTipoSFA'>
	<option hidden selected>Selecione uma opção</option>
	<option value='Instalação'>Instalação</option>
	<option value='Solicitação'>Solicitação</option>
	<option value='Retirada'>Retirada</option></select>
</td>

ขยายตัวอย่างข้อมูล

เพียงใส่ "ซ่อน" ในตัวเลือกที่คุณต้องการซ่อนในรายการแบบหล่นลง

— ราฟาเอลโมริ
แหล่งที่มา

8

โซลูชันที่ทำงานโดยใช้ CSS เท่านั้น:

ตอบ: Inline CSS

<select>
    <option style="display:none;"></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

ขยายตัวอย่างข้อมูล

B: CSS Style Sheet

หากคุณมีไฟล์ CSS อยู่ในมือคุณสามารถกำหนดเป้าหมายไฟล์แรกได้optionโดยใช้:

select.first-opt-hidden option:first-of-type {
  display:none;
}

<select class="first-opt-hidden">
    <option></option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
</select>

ขยายตัวอย่างข้อมูล

— ไก่ Noack
แหล่งที่มา

4

สิ่งนี้จะช่วย:

https://www.w3schools.com/tags/att_select_required.asp

 <form>
 <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>
<button type="submit">Submit</button>
</form>

ขยายตัวอย่างข้อมูล

— Rohan Parab
แหล่งที่มา

นี่เป็นวิธีที่ทันสมัยที่สุด (html5) ในการบรรลุข้อกำหนดนี้โปรดทราบว่าต้องใช้ปุ่ม type = submit ปุ่ม type = พร้อมตัวจัดการการส่ง onclick ไม่ต้องการให้ผู้ใช้ทำการเลือกโดยอัตโนมัติ

— Arjan

3

<select required>
  <option value="" disabled selected>None</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

คุณสามารถหลีกเลี่ยงการตรวจสอบที่กำหนดเองในกรณีนี้

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

2

เป็นเพียงคำพูดเล็ก ๆ :

เบราว์เซอร์ Safari บางตัวดูเหมือนจะไม่เคารพทั้งคุณลักษณะ "ซ่อน" หรือการตั้งค่าสไตล์ "ไม่มี:" (ทดสอบด้วย Safari 12.1 ภายใต้ MacOS 10.12.6) หากไม่มีข้อความตัวยึดตำแหน่งที่ชัดเจนเบราว์เซอร์เหล่านี้จะแสดงบรรทัดแรกที่ว่างในรายการตัวเลือก ดังนั้นจึงอาจเป็นประโยชน์ในการจัดเตรียมข้อความอธิบายสำหรับรายการ "จำลอง" นี้เสมอ:

<option hidden disabled selected value>(select an option)</option>

ด้วยคุณลักษณะ "ปิดใช้งาน" จะไม่สามารถเลือกได้

— Andreas Rozek
แหล่งที่มา

1

ฉันเข้าใจว่าคุณกำลังพยายามทำอะไรวิธีที่ดีที่สุดและประสบความสำเร็จที่สุดคือ:

<select name='department' required>
   <option value="">None</option>
   <option value="Teaching">Teaching department</option>
   <option value="nonTeaching">Non-teaching department</option> 
</select>

— Guryash Singh
แหล่งที่มา

1

ฉันพบว่ามันน่าสนใจจริงๆเพราะฉันเพิ่งเจอสิ่งเดียวกันเมื่อไม่นานมานี้ อย่างไรก็ตามฉันพบตัวอย่างบนอินเทอร์เน็ตเกี่ยวกับการแก้ปัญหาเกี่ยวกับเรื่องนี้

โดยไม่มีความกังวลใจใด ๆ เพิ่มเติมดูส่วนรหัสด้านล่าง:

<select>
 <option value data-isdefault="true">--Choose one Option--</option>
 <option>Option 1</option>
 <option>Option 2</option>
 <option>Option 3</option>
</select>

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

ฉันหวังว่ามันจะช่วยได้ ไชโย!

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

ทำให้ไม่สามารถส่งได้ แต่ดึงความสนใจของผู้ใช้ไปยังเมนูดร็อปดาวน์ดูเหมือนจะซ้ำซ้อน แต่ฉันชอบคำแนะนำ

— Iofacture

@ lofacture: ขอบคุณสำหรับการป้อนข้อมูล จริง ๆ แล้วรหัสที่ฉันเขียนนั้นเป็นสิ่งที่ฉันต้องการ แต่ก็อย่างที่คุณบอกว่ามันขึ้นอยู่กับความต้องการของผู้ใช้ / เจ้าของ

— farisfath 25

0

ไม่มีวิธีแก้ไข HTML ตามสเป็ค HTML 4.01 พฤติกรรมของเบราว์เซอร์จะไม่ได้กำหนดหากไม่มีoptionองค์ประกอบใดที่มีselectedคุณสมบัติและสิ่งที่เบราว์เซอร์ทำในทางปฏิบัติก็คือพวกเขาเลือกตัวเลือกแรกไว้ล่วงหน้า

คุณสามารถแทนที่selectองค์ประกอบด้วยชุดของinput type=radioองค์ประกอบ (ด้วยnameแอตทริบิวต์เดียวกัน) สิ่งนี้สร้างการควบคุมแบบเดียวกันแม้ว่าจะมีลักษณะที่แตกต่างและส่วนต่อประสานกับผู้ใช้ หากinput type=radioองค์ประกอบใดไม่มีคุณสมบัติจะไม่มีการเลือกองค์ประกอบcheckedเหล่านั้นในเบราว์เซอร์ที่ทันสมัยที่สุด

— Jukka K. Korpela
แหล่งที่มา

0

ฉันกำลังใช้เฟรมเวิร์ก Laravel 5 และคำตอบของ @Gambi ก็ใช้ได้สำหรับฉันเช่นกัน แต่ด้วยการเปลี่ยนแปลงบางอย่างสำหรับโครงการของฉัน

ฉันมีค่าตัวเลือกในตารางฐานข้อมูลและใช้กับคำสั่ง foreach แต่ก่อนหน้าคำสั่งฉันได้เพิ่มตัวเลือกด้วย @Gambit การตั้งค่าที่แนะนำและใช้งานได้

นี่คือตัวอย่างของฉัน:

@isset($keys)
  <select>
    <option  disabled selected value></option>
    @foreach($keys as $key)
      <option>{{$key->value)</option>
    @endforeach
  </select>
@endisset

ฉันหวังว่านี่จะช่วยให้ใครบางคนเช่นกัน ดีแล้วทำต่อไป!

— เข้าสู่ระบบ Oracle
แหล่งที่มา

0

ลองสิ่งนี้:

<h2>Favorite color</h2>
<select name="color">
<option value=""></option>
<option>Pink</option>
<option>Red</option>
<option>Blue</option>
</select>

ตัวเลือกแรกในเมนูแบบเลื่อนลงจะว่างเปล่า

— อภิสิทธิ์ปาย
แหล่งที่มา

0

ในการแสดงโปรดเลือกค่าในรายการดรอปดาวน์และซ่อนหลังจากเลือกค่าบางค่า กรุณาใช้รหัสด้านล่าง

มันจะสนับสนุนการตรวจสอบที่จำเป็น

<select class="form-control" required>
<option disabled selected value style="display:none;">--Please select a value</option>
              <option >Data 1</option>
              <option >Data 2</option>
              <option >Data 3</option>
</select>

ขยายตัวอย่างข้อมูล

— Bathri Nathan
แหล่งที่มา

0

หากคุณใช้แองกูลาร์ (2+), (หรือกรอบงานอื่น ๆ ) คุณสามารถเพิ่มตรรกะบางอย่าง ตรรกะจะเป็น: เพียงแสดงตัวเลือกที่ว่างเปล่าหากผู้ใช้ยังไม่ได้เลือกอื่น ๆ ดังนั้นหลังจากที่ผู้ใช้เลือกตัวเลือกตัวเลือกที่ว่างเปล่าจะหายไป

สำหรับเชิงมุม (9) สิ่งนี้จะมีลักษณะเช่นนี้:

<select>
    <option *ngIf="(hasOptionSelected$ | async) === false"></option>
    <option *ngFor="let option of (options$ | async)[value]="option.id">{{ option.title }}</option>
</select>

— Mike de Klerk
แหล่งที่มา

-2

ลองสิ่งนี้:

<select>
    <option value="">&nbsp;
    <option>Option 1
    <option>Option 2
    <option>Option 3
</select>

ตรวจสอบใน HTML5 ทำงานร่วมกับrequiredคุณสมบัติในองค์ประกอบที่เลือก สามารถเลือกใหม่ได้ ใช้งานได้ใน Google Chrome 45, Internet Explorer 11, Edge, Firefox 41

— อุโมงค์เบลีย์
แหล่งที่มา

ตัวเลือกการเลือกเริ่มต้นเป็นที่ว่างเปล่า

วันนี้ (2015-02-25)

ก่อนหน้านี้ (2013-08-02)

อนาคต

ไฟล์ทดสอบ