Làm cách nào để ẩn <option> trong menu <select> bằng CSS?

Tôi nhận ra rằng có vẻ như Chrome sẽ không cho phép tôi ẩn nấp <option>trong <select>. Firefox sẽ.

Tôi cần ẩn các <option>s phù hợp với tiêu chí tìm kiếm. Trong các công cụ web của Chrome, tôi có thể thấy rằng chúng đang được đặt chính xác display: none;bởi JavaScript của tôi, nhưng khi <select>menu được nhấp vào, chúng sẽ được hiển thị.

Làm cách nào để làm cho những thứ này <option>phù hợp với tiêu chí tìm kiếm của tôi KHÔNG hiển thị khi nhấp vào menu? Cảm ơn!

Bạn phải thực hiện hai phương pháp để ẩn. display: nonehoạt động cho FF, nhưng không hoạt động cho Chrome hoặc IE. Vì vậy, phương pháp thứ hai là gói <option>trong a <span>với display: none. FF sẽ không làm điều đó (HTML không hợp lệ về mặt kỹ thuật, theo thông số kỹ thuật) nhưng Chrome và IE thì có và nó sẽ ẩn tùy chọn.

CHỈNH SỬA: Ồ đúng rồi, tôi đã triển khai điều này trong jQuery:

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 )
            jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

CHỈNH SỬA 2: Đây là cách bạn sẽ sử dụng chức năng này:

jQuery(selector).toggleOption(true); // show option
jQuery(selector).toggleOption(false); // hide option

CHỈNH SỬA 3: Đã thêm kiểm tra bổ sung do @ user1521986 đề xuất

Đối với HTML5, bạn có thể sử dụng thuộc tính 'hidden'.

<option hidden>Hidden option</option>

Nó không được IE hỗ trợ.

<select>  
  <option>Option1</option>
  <option>Option2</option>
  <option hidden>Hidden Option</option>
</select>

Tham khảo .

Tôi khuyên bạn không nên sử dụng các giải pháp sử dụng <span>trình bao bọc vì nó không phải là HTML hợp lệ, điều này có thể gây ra sự cố. Tôi nghĩ rằng giải pháp ưa thích là thực sự loại bỏ bất kỳ tùy chọn nào bạn muốn ẩn và khôi phục chúng nếu cần. Sử dụng jQuery, bạn sẽ chỉ cần 3 chức năng sau:

Chức năng đầu tiên sẽ lưu nội dung ban đầu của vùng chọn . Để an toàn, bạn có thể muốn gọi hàm này khi tải trang.

function setOriginalSelect ($select) {
    if ($select.data("originalHTML") == undefined) {
        $select.data("originalHTML", $select.html());
    } // If it's already there, don't re-set it
}

Hàm tiếp theo này gọi hàm trên để đảm bảo rằng nội dung gốc đã được lưu và sau đó chỉ cần xóa các tùy chọn khỏi DOM.

function removeOptions ($select, $options) {
    setOriginalSelect($select);
    $options.remove();
 }

Chức năng cuối cùng có thể được sử dụng bất cứ khi nào bạn muốn "thiết lập lại" trở lại tất cả các tùy chọn ban đầu.

function restoreOptions ($select) {
    var ogHTML = $select.data("originalHTML");
    if (ogHTML != undefined) {
        $select.html(ogHTML);
    }
}

Lưu ý rằng tất cả các hàm này mong đợi rằng bạn đang truyền các phần tử jQuery. Ví dụ:

// in your search function...
var $s = $('select.someClass');
var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass');
restoreOptions($s); // Make sure you're working with a full deck
removeOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed

Đây là một ví dụ hoạt động: http://jsfiddle.net/9CYjy/23/

Câu trả lời của Ryan P nên được đổi thành:

    jQuery.fn.toggleOption = function (show) {
        $(this).toggle(show);
        if (show) {
            if ($(this).parent('span.toggleOption').length)
                $(this).unwrap();
        } else {
            **if ($(this).parent('span.toggleOption').length==0)**
                $(this).wrap('<span class="toggleOption" style="display: none;" />');
        }
    };

Nếu không, nó được bọc trong quá nhiều thẻ

Chức năng toggleOption không hoàn hảo và có nhiều lỗi khó chịu trong ứng dụng của tôi. jQuery sẽ bị nhầm lẫn với .val () và .arraySerialize () Hãy thử chọn tùy chọn 4 và 5 để xem tôi muốn nói gì:

<select id="t">
<option value="v1">options 1</option>
<option value="v2">options 2</option>
<option value="v3" id="o3">options 3</option>
<option value="v4">options 4</option>
<option value="v5">options 5</option>
</select>
<script>
jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        if( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

$("#o3").toggleOption(false); 
$("#t").change(function(e) {
    if($(this).val() != this.value) {
    console.log("Error values not equal", this.value, $(this).val());
    }
});
</script>

Theo cách này, lựa chọn đầu vào rất phức tạp. Còn về việc vô hiệu hóa nó thay vào đó, điều này sẽ hoạt động trên nhiều trình duyệt:

$('select').children(':nth-child(even)').prop('disabled', true);

Điều này sẽ vô hiệu hóa mọi <option>phần tử khác , nhưng bạn có thể chọn bất kỳ phần tử nào bạn muốn.

Đây là bản demo: http://jsfiddle.net/jYWrH/

Lưu ý: Nếu bạn muốn xóa thuộc tính bị vô hiệu hóa của một phần tử, bạn có thể sử dụng .removeProp('disabled').

Cập nhật

Bạn có thể lưu các <option>phần tử bạn muốn ẩn trong phần tử chọn ẩn:

$('#visible').on('change', function () {
    $(this).children().eq(this.selectedIndex).appendTo('#hidden');
});

Sau đó, bạn có thể thêm các <option>phần tử trở lại phần tử chọn ban đầu:

$('#hidden').children().appendTo('#visible');

Trong hai ví dụ này, phần tử chọn hiển thị có id là visiblevà phần tử chọn ẩn có id là hidden.

Đây là bản demo: http://jsfiddle.net/jYWrH/1/

Lưu ý rằng tính năng .on()mới trong jQuery 1.7 và cách sử dụng cho câu trả lời này cũng giống như .bind(): http://api.jquery.com/on

Câu trả lời đơn giản: Bạn không thể. Các phần tử biểu mẫu có khả năng tạo kiểu rất hạn chế.

Cách thay thế tốt nhất là đặt disabled=truetrên tùy chọn (và có thể là màu xám, vì chỉ IE làm điều đó tự động) và điều này sẽ làm cho tùy chọn không thể nhấp được.

Ngoài ra, nếu bạn có thể, hãy xóa hoàn toàn optionphần tử.

// Simplest way

var originalContent = $('select').html();

$('select').change(function() {
    $('select').html(originalContent); //Restore Original Content
    $('select option[myfilter=1]').remove(); // Filter my options
});

Vì bạn đã sử dụng JS nên bạn có thể tạo phần tử CHỌN ẩn trên trang và đối với mỗi mục bạn đang cố ẩn trong danh sách đó, hãy di chuyển nó vào danh sách ẩn. Bằng cách này, chúng có thể được khôi phục dễ dàng.

Tôi không biết cách thực hiện nó trong CSS thuần túy ... Tôi đã nghĩ rằng màn hình hiển thị: không có thủ thuật nào có hiệu quả.

!!! CẢNH BÁO !!!

Thay thế "IF" thứ hai bằng "WHILE" hoặc không hoạt động!

jQuery.fn.toggleOption = function( show ) {
    jQuery( this ).toggle( show );
    if( show ) {
        while( jQuery( this ).parent( 'span.toggleOption' ).length )
            jQuery( this ).unwrap( );
    } else {
        jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' );
    }
};

Bạn nên xóa chúng khỏi <select>JavaScript bằng cách sử dụng. Đó là cách đảm bảo duy nhất để khiến chúng biến mất.

cái này có vẻ phù hợp với tôi trong chrome

$("#selectid span option").unwrap();
$("#selectid option:not([filterattr=filtervalue])").wrap('<span/>');

Cuối game, nhưng hầu hết trong số này có vẻ khá phức tạp.

Đây là cách tôi đã làm điều đó:

var originalSelect = $('#select-2').html();

// filter select-2 on select-1 change
$('#select-1').change(function (e) {

    var selected = $(this).val();

    // reset select ready for filtering
    $('#select-2').html(originalCourseSelect);

    if (selected) {
        // filter
        $('#select-2 option').not('.t' + selected).remove();
    }

});

đánh dấu lựa chọn-1:

<select id='select-1'>
<option value=''>Please select</option>
<option value='1'>One</option>
<option value='2'>Two</option>
</select>

đánh dấu của lựa chọn-2:

<select id='select-2'>
<option class='t1'>One</option>
<option class='t2'>Two</option>
<option>Always visible</option>
</select>