Bagaimana cara menyembunyikan <option> di menu <select> dengan CSS?

Saya menyadari bahwa Chrome, tampaknya, tidak mengizinkan saya bersembunyi <option>di file <select>. Firefox akan.

Saya perlu menyembunyikan <option>s yang cocok dengan kriteria pencarian. Di alat web Chrome saya dapat melihat bahwa mereka disetel dengan benar display: none;oleh JavaScript saya, tetapi setelah <select>menu diklik, mereka ditampilkan.

Bagaimana saya bisa membuat ini <option>yang sesuai dengan kriteria pencarian saya TIDAK muncul saat menu diklik? Terima kasih!

Anda harus menerapkan dua metode untuk bersembunyi. display: noneberfungsi untuk FF, tetapi tidak untuk Chrome atau IE. Jadi metode kedua membungkus <option>dalam <span>dengan display: none. FF tidak akan melakukannya (HTML secara teknis tidak valid, sesuai spesifikasi) tetapi Chrome dan IE akan dan itu akan menyembunyikan opsi.

EDIT: Oh ya, saya sudah menerapkan ini di 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;" />' );
    }
};

EDIT 2: Inilah cara Anda menggunakan fungsi ini:

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

EDIT 3: Menambahkan pemeriksaan ekstra yang disarankan oleh @ user1521986

Untuk HTML5, Anda dapat menggunakan atribut 'tersembunyi'.

<option hidden>Hidden option</option>

Itu tidak didukung oleh IE <11. Tetapi jika Anda hanya perlu menyembunyikan beberapa elemen, mungkin akan lebih baik untuk hanya mengatur atribut tersembunyi dalam kombinasi dengan nonaktif dibandingkan dengan menambahkan / menghapus elemen atau melakukan konstruksi yang tidak benar secara semantik.

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

Referensi .

Saya menyarankan agar Anda tidak menggunakan solusi yang menggunakan <span>pembungkus karena ini bukan HTML yang valid, yang dapat menyebabkan masalah di kemudian hari. Saya pikir solusi yang disukai adalah benar-benar menghapus opsi apa pun yang ingin Anda sembunyikan, dan memulihkannya sesuai kebutuhan. Menggunakan jQuery, Anda hanya membutuhkan 3 fungsi berikut:

Fungsi pertama akan menyimpan konten asli yang dipilih . Untuk amannya, Anda mungkin ingin memanggil fungsi ini saat Anda memuat halaman.

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

Fungsi selanjutnya ini memanggil fungsi di atas untuk memastikan bahwa konten asli telah disimpan, dan kemudian menghapus opsi dari DOM.

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

Fungsi terakhir dapat digunakan kapan pun Anda ingin "mengatur ulang" kembali ke semua opsi awal.

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

Perhatikan bahwa semua fungsi ini mengharapkan Anda meneruskan elemen jQuery. Sebagai contoh:

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

Berikut adalah contoh yang berfungsi: http://jsfiddle.net/9CYjy/23/

Jawaban Ryan P harus diubah menjadi:

    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;" />');
        }
    };

Jika tidak, tag akan terbungkus terlalu banyak

Fungsi toggleOption tidak sempurna dan menimbulkan bug jahat di aplikasi saya. jQuery akan bingung dengan .val () dan .arraySerialize () Coba pilih opsi 4 dan 5 untuk melihat apa yang saya maksud:

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

Pilih masukan rumit dengan cara ini. Bagaimana dengan menonaktifkannya, ini akan berfungsi lintas browser:

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

Ini akan menonaktifkan setiap <option>elemen lainnya , tetapi Anda dapat memilih mana yang Anda inginkan.

Ini demo nya: http://jsfiddle.net/jYWrH/

Catatan: Jika Anda ingin menghapus properti nonaktif dari suatu elemen, Anda dapat menggunakan .removeProp('disabled').

Memperbarui

Anda dapat menyimpan <option>elemen yang ingin Anda sembunyikan di elemen pilih tersembunyi:

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

Anda kemudian dapat menambahkan <option>elemen kembali ke elemen pilih asli:

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

Dalam dua contoh ini, diharapkan elemen pemilihan yang terlihat memiliki id visibledan elemen pemilihan tersembunyi memiliki id hidden.

Ini demonya: http://jsfiddle.net/jYWrH/1/

Perhatikan bahwa .on()ini baru di jQuery 1.7 dan dalam penggunaan untuk jawaban ini sama dengan .bind(): http://api.jquery.com/on

Jawaban sederhana: Anda tidak bisa. Elemen bentuk memiliki kemampuan penataan yang sangat terbatas.

Alternatif terbaik adalah mengatur disabled=trueopsi (dan mungkin warna abu-abu, karena hanya IE yang melakukannya secara otomatis), dan ini akan membuat opsi tidak dapat diklik.

Atau, jika Anda bisa, hapus optionelemen sepenuhnya .

// Simplest way

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

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

Karena Anda sudah menggunakan JS, Anda dapat membuat elemen SELECT yang tersembunyi di halaman, dan untuk setiap item yang Anda coba sembunyikan di daftar itu, pindahkan ke daftar tersembunyi. Dengan cara ini, mereka dapat dengan mudah dipulihkan.

Saya tidak tahu cara begitu saja melakukannya dalam CSS murni ... Saya akan berpikir bahwa trik display: none akan berhasil.

!!! PERINGATAN !!!

Ganti "IF" kedua dengan "WHILE" atau tidak berfungsi!

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;" />' );
    }
};

Anda harus menghapusnya dari <select>menggunakan JavaScript. Itulah satu-satunya cara yang dijamin untuk membuat mereka pergi.

yang satu ini sepertinya berhasil untuk saya di chrome

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

Terlambat dalam permainan, tetapi sebagian besar tampaknya cukup rumit.

Begini cara saya melakukannya:

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();
    }

});

markup pilihan-1:

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

markup dari pilih-2:

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