2013-02-22 7 views
7

Đây là ví dụ tôi đang làm việc trên: http://jsfiddle.net/4suwY/5/option.style.display = "none" không làm việc trong safari

HTML:

<select id="asd"> 
    <option>hello</option> 
    <option>I'M THE CHOSEN ONE</option> 
    <option>asd</option> 
    <option>wer</option> 
    <option>qwe</option> 
</select> 

JS:

var sel = document.getElementById("asd"); 
var optnz = sel.getElementsByTagName("option")[1]; 
sel.value = optnz.value; 
optnz.style.display = "none"; 

Như bạn có thể thấy, nó hoạt động trong chrome, nhưng nó không hoạt động trong safari .. Điều gì cần làm, là ẩn tùy chọn "TÔI LÀ CHOSEN ONE" khi bạn nhấp vào trình đơn thả xuống ..

Đây là một thử nghiệm tôi đã thực hiện: http://jsfiddle.net/4suwY/11/

Cùng HTML, đây là JS:

var sel = document.getElementById("asd"); 
var opt = document.createElement("option"); 
opt.innerHTML = "YAYA"; 
opt.value = "YAYA"; 
sel.appendChild(opt); 
sel.value = "YAYA"; 
opt.style.display = "none"; 

Dù sao, những gì tôi cần làm là hiển thị một tùy chọn như chọn (hiện tại), và ẩn đến người dùng khi trình đơn thả xuống được mở ra, vì vậy anh ấy không thể chọn nó.

Bất kỳ đề xuất/giải pháp nào khác? Tôi không thấy lỗi nào. Có vấn đề gì với Safari? Tôi có nên thay đổi cách tiếp cận? Jquery dường như không giúp đỡ.


CHỈNH SỬA:

tôi cần phải che giấu các tùy chọn trong dropdownmenu, nhưng đồng thời tôi cần phải hiển thị tùy chọn "giá trị" này là giá trị được lựa chọn! Ví dụ: menu thả xuống "đã đóng" sẽ hiển thị giá trị "Tôi là CHOSEN ONE", nhưng nếu tôi nhấp và mở menu, các tùy chọn hiển thị duy nhất sẽ là "hello, asd, wer, qwe" ..

Trả lời

19

Bạn không thể chuyển đổi hiển thị trên các phần tử <option> trong Safari (hoặc IE). Đây là một phần của truyền thống lâu dài và không nhất quán với chức năng tạo kiểu CSS hạn chế trên các phần tử biểu mẫu, tin rằng ngôn ngữ trực quan của các yếu tố tương tác phải nhất quán với HĐH (không có điểm cố gắng tìm lý do cho các lỗi của IE).

Tùy chọn duy nhất của bạn là xóa tùy chọn đó (và thêm lại sau) hoặc đặt thành optnz.disabled = true. Xin lỗi vì những tin tức xấu!

+1

Điều đó đã lưu ngày của tôi –

+0

Hoặc sử dụng 'chế độ hiển thị: bị ẩn ' – JDrake