web-dev-qa-db-ja.com

CSSで<選択>メニューの<オプション>を非表示にする方法は？

Chromeでは、<option>で<select>を非表示にすることはできないようです。 Firefoxがします。

検索条件に一致する<option>sを非表示にする必要があります。 Chrome Webツールでは、JavaScriptによってdisplay: none;に正しく設定されていることがわかりますが、一度<select>メニューをクリックすると表示されます。

メニューがクリックされたときに、検索条件に一致するこれらの<option>sを表示しないようにするにはどうすればよいですか？ありがとう！

javascriptjquerycssdom
96
Jesse Atkinson

非表示には2つのメソッドを実装する必要があります。 display: noneはFFで機能しますが、ChromeまたはIEでは機能しません。 2番目の方法は、<option>を<span>でdisplay: noneでラップすることです。 FFはそれを行いません（仕様により技術的に無効なHTML）が、ChromeとIEはオプションを隠します。

編集：そうそう、私はすでに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;" />' );
    }
};

編集2：この関数を使用する方法は次のとおりです。

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

編集3：@ user1521986によって提案された追加のチェックを追加

69
Ryan P

HTML5の場合、「hidden」属性を使用できます。

<option hidden>Hidden option</option>

IE <11でサポートされているnotです。しかし、いくつかの要素を非表示にするだけでよい場合は、要素を追加/削除したり、意味的に正しい構成を行わなかったりするのと比較して、hidden属性をdisabledと組み合わせて設定するだけです。

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

参照 。

57
Lukas Jelinek

有効なHTMLではないため、<span>ラッパーを使用するソリューションを使用するnotを行うことをお勧めします。これは、今後問題を引き起こす可能性があります。望ましい解決策は、非表示にするオプションを実際に削除し、必要に応じて復元することだと思います。 jQueryを使用すると、次の3つの関数のみが必要になります。

最初の関数は、selectの元の内容を保存します。安全のために、ページをロードするときにこの関数を呼び出すことができます。

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

この次の関数は、上記の関数を呼び出して元のコンテンツが保存されていることを確認してから、DOMからオプションを削除するだけです。

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

最後の関数は、すべての元のオプションに「リセット」したいときにいつでも使用できます。

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

これらの関数はすべて、jQuery要素を渡すことを想定していることに注意してください。例えば：

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

これが実際の例です： http://jsfiddle.net/9CYjy/23/

34
Luke

ライアンPの答えは次のように変更する必要があります。

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

それ以外の場合は、あまりにも多くのタグでラップされます

18
JeffT

ToggleOption関数は完全ではなく、アプリケーションに厄介なバグが発生しました。 jQueryは.val（）および.arraySerialize（）と混同されます。オプション4および5を選択して、意味を確認してください。

<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>
9
Batiste Bieler

この方法では、選択入力には注意が必要です。代わりに無効にするとどうなりますか、これはクロスブラウザで動作します：

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

これにより、他のすべての<option>要素が無効になりますが、必要なものを選択できます。

デモは次のとおりです。 http://jsfiddle.net/jYWrH/

注：要素の無効なプロパティを削除する場合は、.removeProp('disabled')を使用できます。

更新

非表示にする<option>要素を非表示の選択要素に保存できます。

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

その後、元のselect要素に<option>要素を追加できます。

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

これらの2つの例では、可視の選択要素のIDはvisibleであり、非表示の選択要素のIDはhiddenであると想定されています。

デモは次のとおりです。 http://jsfiddle.net/jYWrH/1/

.on()はjQuery 1.7で新しく追加され、この回答の使用法は.bind()と同じであることに注意してください。 http://api.jquery.com/on

8
Jasper

簡単な答え：できません。フォーム要素のスタイリング機能は非常に限られています。

最良の代替案は、オプションにdisabled=trueを設定することです（そして、おそらくIEのみが自動的に行うため、グレー色）、これによりオプションはクリック不可になります。

または、可能であれば、option要素を完全に削除します。

6
Niet the Dark Absol
// Simplest way

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

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

すでにJSを使用しているため、ページ上に非表示のSELECT要素を作成し、そのリストで非表示にしようとしている各アイテムについて、非表示リストに移動します。これにより、簡単に復元できます。

私は純粋なCSSでそれを行う方法を知らない...私は、display：noneトリックが機能すると思っていただろう。

4
Derreck Dean

JavaScriptを使用して<select>から削除する必要があります。それが彼らを去らせる唯一の保証された方法です。

2
Jordan

!!!警告!!!

2番目の「IF」を「WHILE」に置き換えるか、機能しません！

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

これはクロムで私のために働くようです

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

ゲームに遅れたが、これらのほとんどは非常に複雑に見える。

以下がその方法です。

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のマークアップ：

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

select-2のマークアップ：

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