HTML SELECT trống không có mục trống trong danh sách thả xuống

Làm thế nào để triển khai subj?

khi tôi viết:

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

thì mục được chọn mặc định là "aaaa"

khi tôi viết:

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

thì mục đã chọn mặc định là trống, nhưng mục trống này hiển thị trong trình đơn thả xuống.

Làm cách nào tôi có thể triển khai thẻ SELECT với giá trị trống mặc định bị ẩn trong danh sách thả xuống?

Chỉ cần sử dụng các thuộc tính bị vô hiệu hóa và / hoặc ẩn:

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

• selected đặt tùy chọn này làm tùy chọn mặc định.
• disabled làm cho tùy chọn này không thể nhấp vào.
• style='display: none'làm cho tùy chọn này không hiển thị trong các trình duyệt cũ hơn. Xem: Tôi có thể sử dụng tài liệu cho thuộc tính ẩn.
• hidden làm cho tùy chọn này không được hiển thị trong danh sách thả xuống.

Bạn có thể cài đặt selectedIndexthành -1sử dụng .prop: http://jsfiddle.net/R9auG/ .

Đối với các phiên bản jQuery cũ hơn, hãy sử dụng .attrthay vì .prop: http://jsfiddle.net/R9auG/71/ .

Đơn giản chỉ cần sử dụng

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

sẽ hoạt động ở mọi nơi mà không cần tập lệnh và cho phép bạn hướng dẫn người dùng cùng một lúc.

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

Đây là một cách đơn giản để làm điều đó bằng cách sử dụng JavaScript thuần túy. Đây là tương đương vani của tập lệnh jQuery được đăng bởi pimvdb. Bạn có thể kiểm tra nó ở đây .

<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>

Đảm bảo rằng "id_here" khớp trong biểu mẫu và trong JavaScript.

Bạn không thể. Đơn giản là chúng không hoạt động theo cách đó. Menu thả xuống phải luôn có một trong các tùy chọn được chọn.

Bạn có thể (mặc dù tôi không khuyến khích) theo dõi một sự kiện thay đổi và sau đó sử dụng JS để xóa tùy chọn đầu tiên nếu nó trống.

Đối với html thuần túy, @isherwood có một giải pháp tuyệt vời. Đối với jQuery, hãy cung cấp cho lựa chọn của bạn một ID thả xuống, sau đó chọn nó bằng jQuery:

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

Sau đó, sử dụng jQuery này để xóa trình đơn thả xuống khi tải trang:

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

Hoặc đặt nó bên trong một hàm của chính nó:

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

hoàn thành những gì bạn đang tìm kiếm và thật dễ dàng để đưa nó vào các hàm có thể được gọi trên trang của bạn nếu bạn cần bỏ trống menu thả xuống mà không cần tải lại trang.

Bạn có thể thử đoạn mã này

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

Nó đã làm việc cho tôi.