เลือก HTML เปล่าโดยไม่มีรายการว่างในรายการแบบเลื่อนลง

วิธีใช้ subj?

เมื่อฉันเขียน:

<form>
  <select>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

จากนั้นรายการที่เลือกเริ่มต้นคือ "aaaa"

เมื่อฉันเขียน:

<form>
  <select>
     <option value=""></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>
</form>

จากนั้นรายการที่เลือกเริ่มต้นจะว่างเปล่า แต่รายการว่างนี้จะแสดงในเมนูแบบเลื่อนลง

ฉันจะติดตั้งแท็ก SELECT ด้วยค่าว่างเริ่มต้นที่ซ่อนอยู่ในรายการแบบเลื่อนลงได้อย่างไร

เพียงใช้ปิดการใช้งานและ / หรือคุณลักษณะที่ซ่อนอยู่:

<option selected disabled hidden style='display: none' value=''></option>

• selected ทำให้ตัวเลือกนี้เป็นค่าเริ่มต้น
• disabled ทำให้ตัวเลือกนี้ไม่สามารถคลิกได้
• style='display: none'ทำให้ตัวเลือกนี้ไม่แสดงในเบราว์เซอร์รุ่นเก่า ดู: ฉันสามารถใช้เอกสารสำหรับแอตทริบิวต์ที่ซ่อนอยู่ได้หรือไม่
• hidden ทำให้ตัวเลือกนี้ไม่แสดงในรายการดรอปดาวน์

คุณสามารถโดยการตั้งค่าselectedIndexการ-1ใช้.prop: http://jsfiddle.net/R9auG/

สำหรับรุ่นเก่า jQuery ใช้.attrแทน.prop: http://jsfiddle.net/R9auG/71/

เพียงแค่ใช้

<option value="" selected disabled>Please select an option...</option>

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

<select>
     <option value="" style="display:none;"></option>
     <option value="0">aaaa</option>
     <option value="1">bbbb</option>
  </select>

นี่คือวิธีง่ายๆในการทำโดยใช้ JavaScript ธรรมดา นี่คือวานิลลาเทียบเท่ากับสคริปต์ jQuery ที่โพสต์โดย pimvdb คุณสามารถทดสอบได้ที่นี่

<script type='text/javascript'>
  window.onload = function(){
    document.getElementById('id_here').selectedIndex = -1;
  }
</script>

.

<select id="id_here">
  <option>aaaa</option>
  <option>bbbb</option>
</select>

ตรวจสอบว่า "id_here" ตรงกันในแบบฟอร์มและใน JavaScript

คุณทำไม่ได้ พวกเขาไม่ได้ทำงานในลักษณะนั้น เมนูแบบเลื่อนลงต้องมีหนึ่งในตัวเลือกที่เลือกไว้ตลอดเวลา

คุณสามารถ (แม้ว่าฉันจะไม่แนะนำก็ตาม) ดูเหตุการณ์การเปลี่ยนแปลงจากนั้นใช้ JS เพื่อลบตัวเลือกแรกหากว่างเปล่า

สำหรับ html อย่างหมดจด @isherwood มีทางออกที่ดี สำหรับ jQuery ให้เลือกรายการแบบเลื่อนลง ID จากนั้นเลือกด้วย jQuery:

<form>
  <select id="myDropDown">
    <option value="0">aaaa</option>
    <option value="1">bbbb</option>
  </select>
</form> 

จากนั้นใช้ jQuery นี้เพื่อล้างเมนูแบบเลื่อนลงในการโหลดหน้า:

$(document).ready(function() {
    $('#myDropDown').val(''); 
});

หรือวางไว้ในฟังก์ชันด้วยตัวเอง:

$('#myDropDown').val(''); 

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

คุณสามารถลองใช้ตัวอย่างข้อมูลนี้

$("#your-id")[0].selectedIndex = -1

มันได้ผลสำหรับฉัน