TianDev

Lưu ý sử dụng display=none cho select.option

Posted: December 9, 2019 by anhkevin

Lưu ý: khi sử dụng display=none cho option trong select sẽ không hoạt động trên safari của MACIOS

VD dưới đây là ẩn option 2 trong select đi, nhưng nếu sử dụng display=none thì trên safari vẫn hiển thị ra

<select> 
    <option> option 1 </option> 
    <option style="display: none"> option 2 </option> 
    <option> option 3 </option> 
    <option> option 4 </option> 
    <option> option 5 </option> 
</select>

Cách giải quyết:
1: Xóa option đó khỏi select nếu không muốn hiển thị, trường hợp ngược lại thì add option đó vào hoặc load lại dữ liệu trong select
2: Sử dụng disabled đối với option không muốn cho chọn, lúc này sẽ không chọn được option đó nữa
Có thể kết hợp css để ẩn luôn option đó

select option[disabled] { 
    display: none; 
}