CSS ile <seç> menüsünde bir <seçenek> nasıl gizlenir?

Görünüşe göre Chrome'un <option>bir <select>. Firefox yapacak.

<option>Bir arama kriterine uyan ’leri gizlemem gerekiyor . Chrome web araçlarında display: none;, JavaScript'im tarafından doğru şekilde ayarlandıklarını görebiliyorum , ancak daha sonra <select>menü tıklandığında gösteriliyorlar.

<option>Arama kriterlerime uyan bu ’ lerin menü tıklandığında gösterilmemesini nasıl sağlayabilirim ? Teşekkürler!

Gizlemek için iki yöntem uygulamanız gerekir. display: noneFF için çalışır, ancak Chrome veya IE için çalışmaz. Yani ikinci yöntem tamamlıyor <option>bir de <span>sahip display: none. FF bunu yapmaz (teknik olarak geçersiz HTML, spesifikasyona göre), ancak Chrome ve IE bunu yapacak ve seçeneği gizleyecektir.

DÜZENLEME: Oh evet, bunu zaten jQuery'de uyguladım:

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

DÜZENLEME 2: Bu işlevi şu şekilde kullanırsınız:

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

DÜZENLEME 3: @ user1521986 tarafından önerilen ekstra kontrol eklendi

HTML5 için "gizli" özelliğini kullanabilirsiniz.

<option hidden>Hidden option</option>

O edilir değil IE <11. desteklediği Ama eğer belki ekleme / elemanlarını kaldırma veya anlam doğru yapılar değil yapıyor kıyasla daha iyi özürlü ile birlikte sadece belirlenen gizli özniteliği olacaktır, birkaç öğeleri gizlemek elde etmesi yeterli.

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

Referans .

Sana do öneririz değil bir kullanmak çözümler kullanmak <span>o yolda sorunlara neden olabilecek geçerli HTML, olmadığı için sarmalayıcı. Bence tercih edilen çözüm, gizlemek istediğiniz tüm seçenekleri gerçekten kaldırmak ve gerektiğinde geri yüklemek. JQuery'yi kullanarak yalnızca şu 3 işleve ihtiyacınız olacak:

İlk işlev orijinal içeriğini kurtaracak seçin . Sadece güvende olmak için, sayfayı yüklediğinizde bu işlevi çağırmak isteyebilirsiniz.

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

Bu sonraki işlev, orijinal içeriğin kaydedildiğinden emin olmak için yukarıdaki işlevi çağırır ve ardından seçenekleri DOM'dan kaldırır.

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

Son işlev, tüm orijinal seçeneklere "sıfırlamak" istediğinizde kullanılabilir.

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

Tüm bu işlevlerin jQuery öğelerini iletmenizi beklediğini unutmayın. Örneğin:

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

İşte çalışan bir örnek: http://jsfiddle.net/9CYjy/23/

Ryan P'nin cevabı şu şekilde değiştirilmelidir:

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

Aksi takdirde, çok fazla etikete sarılır

ToggleOption işlevi mükemmel değil ve uygulamamda kötü hatalar ortaya çıktı. jQuery .val () ve .arraySerialize () ile karıştırılacak ne demek istediğimi görmek için 4 ve 5 seçeneklerini seçmeyi deneyin:

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

Bu şekilde belirli girişler aldatıcıdır. Bunun yerine devre dışı bırakmaya ne dersiniz, bu tarayıcılar arası çalışacaktır:

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

Bu, diğer tüm <option>öğeleri devre dışı bırakır , ancak hangisini istediğinizi seçebilirsiniz.

İşte bir demo: http://jsfiddle.net/jYWrH/

Not: Bir elemanın devre dışı bırakılmış özelliğini kaldırmak isterseniz kullanabilirsiniz. .removeProp('disabled') .

Güncelleme

<option>Gizlemek istediğiniz öğeleri gizli seçim öğesinde kaydedebilirsiniz :

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

Daha sonra <option>öğeleri orijinal seçim öğesine geri ekleyebilirsiniz :

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

Bu iki örnekte, görünür seçme öğesinin kimliğine visibleve gizli seçme öğesinin kimliğine sahip olması beklenir .hidden .

İşte bir demo: http://jsfiddle.net/jYWrH/1/

Not .on()jQuery 1.7 ve bu yanıt için kullanımında yeni aynıdır .bind(): http://api.jquery.com/on

Basit cevap: Yapamazsınız. Form öğelerinin çok sınırlı stil yetenekleri vardır.

En iyi alternatif disabled=true, seçeneği ayarlamaktır (ve belki gri bir renk, çünkü bunu yalnızca IE otomatik olarak yapar) ve bu, seçeneği tıklanamaz hale getirecektir.

Alternatif olarak, eğer yapabiliyorsanız, optionelemanı tamamen kaldırın .

// Simplest way

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

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

Zaten JS kullandığınız için, sayfada gizli bir SELECT öğesi oluşturabilir ve bu listede gizlemeye çalıştığınız her öğe için onu gizli listeye taşıyabilirsiniz. Bu şekilde kolayca geri yüklenebilirler.

Bunu saf CSS ile yapmanın bir yolunu bilmiyorum ... Ekranın hiçbir hile işe yaramayacağını düşünürdüm.

!!! UYARI !!!

İkinci "EĞER" i "WHILE" ile değiştirin veya çalışmıyor!

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

Bunları <select>JavaScript kullanarak kaldırmalısınız . Bu onları uzaklaştırmanın tek garantili yolu.

bu benim için Chrome'da çalışıyor gibi görünüyor

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

Oyuna geç kaldı, ancak bunların çoğu oldukça karmaşık görünüyor.

İşte bunu nasıl yaptım:

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

});

select-1 işaretlemesi:

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

select-2 işaretlemesi:

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