คำถามติดแท็ก html-datalist

ฉันสงสัยว่าความแตกต่างระหว่าง Select-Option และ Datalist-Option คืออะไร มีสถานการณ์ใดที่จะดีกว่าที่จะใช้อย่างใดอย่างหนึ่งหรือไม่? ตัวอย่างของแต่ละรายการดังต่อไปนี้: เลือก - ตัวเลือก <select name="browser"> <option value="firefox">Firefox</option> <option value="ie">IE</option> <option value="chrome">Chrome</option> <option value="opera">Opera</option> <option value="safari">Safari</option> </select> Datalist-Option <input type=text list=browsers> <datalist id=browsers> <option value="Firefox"> <option value="IE"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist>

141 html  html-select  forms  html-datalist 

ปัจจุบัน<datalist>องค์ประกอบHTML5 ได้รับการสนับสนุนในเบราว์เซอร์หลัก ๆ ส่วนใหญ่ (ยกเว้น Safari) และดูเหมือนจะเป็นวิธีที่น่าสนใจในการเพิ่มคำแนะนำให้กับอินพุต อย่างไรก็ตามดูเหมือนว่าจะมีความแตกต่างบางประการระหว่างการใช้งานvalueแอตทริบิวต์และข้อความด้านในของไฟล์<option>. ตัวอย่างเช่น: <input list="answers" name="answer"> <datalist id="answers"> <option value="42">The answer</option> </datalist> เบราว์เซอร์ต่างๆจัดการสิ่งนี้แตกต่างกัน: Chrome และ Opera: FireFox และ IE 11: หลังจากเลือกหนึ่งรายการอินพุตจะเต็มไปด้วยค่าไม่ใช่ข้อความด้านใน ฉันเพียงต้องการให้ผู้ใช้เห็นข้อความ ("คำตอบ") ในเมนูแบบเลื่อนลงและในอินพุต แต่ส่งผ่านค่า42เมื่อส่งเช่นเดียวกับที่selectต้องการ ฉันจะทำให้เบราว์เซอร์ทั้งหมดมีรายการแบบเลื่อนลงแสดงป้าย (ข้อความด้านใน) ของ<option>s ได้อย่างไร แต่จะส่งvalueแอตทริบิวต์เมื่อส่งแบบฟอร์ม

98 javascript  html  cross-browser  html-datalist