web-dev-qa-db-ja.com

JavaScriptで選択オプションを非表示にするにはどうすればよいですか？ （クロスブラウザ）

これは動作するはずです：

$('option').hide(); // hide options

Firefoxでは動作しますが、Chromeではありません（おそらくIEでは動作せず、テストされていません）。

より興味深い例：

<select>
    <option class="hide">Hide me</option>
    <option>visible option</option>
</select>
<script type="text/javascript">
// try to hide the first option
$('option.hide').hide();

// to select the first visible option
$('option:visible').first().attr('selected', 'selected');
</script>

または http://jsfiddle.net/TGxUf/ の例を参照してください

DOMからオプション要素を切り離す唯一のオプションですか？後でもう一度表示する必要があるので、これはあまり効果的ではありません。

javascriptjquerycross-browser
45
dave1010

残念ながら、すべてのブラウザでoption要素を非表示にすることはできません。

過去にこれを行う必要があったとき、そのようにdisabled属性を設定しました...

$('option').prop('disabled', true);

次に、このCSSを使用するブラウザーでサポートされている場所で非表示を使用しました...

select option[disabled] {
    display: none;
}
61
alex

既に述べたように、display:none個々の<option>sはできません。これらは適切な種類のDOM要素ではないからです。

.prop('disabled', true)を設定できますが、これは要素をグレーアウトして選択不能にするだけで、まだスペースを占有します。

私が使用する1つの解決策は、ページの読み込み時に<select>をグローバル変数に.detach()し、必要に応じて<option>sだけを追加し直すことです。このようなもの（ http://jsfiddle.net/mblase75/Afe2E/ ）：

var $sel = $('#sel option').detach(); // global variable

$('a').on('click', function (e) {
    e.preventDefault();
    var c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});

最初は、<option>sを追加する前に.clone()する必要があると思っていましたが、明らかにそうではありません。元のグローバル$selは、clickコードの実行後に変更されません。

グローバル変数に対する嫌悪感がある場合は、オプションを含むjQueryオブジェクトを<select>要素自体の.data()変数として保存できます（ http://jsfiddle.net/mblase75/nh5eW / ）：

$('#sel').data('options', $('#sel option').detach()); // data variable

$('a').on('click', function (e) {
    e.preventDefault();
    var $sel = $('#sel').data('options'), // jQuery object
        c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});
23
Blazemonger

自分でそれをクラックしました、これは私が思いついたものです：

(function($){

    $.fn.extend({detachOptions: function(o) {
        var s = this;
        return s.each(function(){
            var d = s.data('selectOptions') || [];
            s.find(o).each(function() {
                d.Push($(this).detach());
            });
            s.data('selectOptions', d);
        });
    }, attachOptions: function(o) {
        var s = this;
        return s.each(function(){
            var d = s.data('selectOptions') || [];
            for (var i in d) {
                if (d[i].is(o)) {
                    s.append(d[i]);
                    console.log(d[i]);
                    // TODO: remove option from data array
                }
            }
        });
    }});   

})(jQuery);

// example
$('select').detachOptions('.removeme');
$('.b').attachOptions('[value=1]');');

http://www.jsfiddle.net/g5YKh/ で例を見ることができます

option要素はselectsから完全に削除され、jQueryセレクターによって再度追加できます。

すべてのケースで十分に機能する前に、おそらく少しの作業とテストが必要ですが、必要なものには十分です。

12
dave1010

私はこれが少し遅れていることを知っていますが、決してより遅くはありません！これを実現する非常に簡単な方法を次に示します。単に表示および非表示機能があります。 hide関数は、すべてのオプション要素を事前に定義された（非表示の）spanタグ（すべてのブラウザーで機能するはずです）に追加し、show関数はそのオプション要素を選択タグに戻します。 ;）

function showOption(value){
    $('#optionHolder option[value="'+value+'"]').appendTo('#selectID');             
}

function hideOption(value){
    $('select option[value="'+value+'"]').appendTo('#optionHolder');
}
8
Matt T. McAlear

<option>要素の非表示は仕様に含まれていません。ただし、それらをdisableできます。これはクロスブラウザで動作するはずです。

$('option.hide').prop('disabled', true);

http://www.w3.org/TR/html401/interact/forms.html#h-17.6

8
jAndy

スパン内にオプション要素をラップしてみてくださいすると、それらは表示されなくなりますが、DOMにロードされたままになります。以下のように

jQ('#ddlDropdown option').wrap('<span>');

そして、すでに選択されているオプションを表示するには、次のように「selected」属性を含むオプションをアンラップします。

var selectedOption = jQ('#ddlDropdown').find("[selected]");
jQ(selectedOption).unwrap();

これはすべてのブラウザで機能します。

4
NeverEndingLearner

オプションは次のとおりです。

  • すべてのブラウザで動作します
  • フィルタリング時に現在の選択を保持
  • 削除/復元時にアイテムの順序を保持します
  • ダーティハッキングなし/無効なHTML

`

$('select').each(function(){
    var $select = $(this);
    $select.data('options', $select.find('option'));
});

function filter($select, search) {
    var $prev = null;
    var $options = $select.data('options');
    search = search.trim().toLowerCase();
    $options.each(function(){
        var $option = $(this);
        var optionText = $option.text();
        if(search == "" || optionText.indexOf(search) >= 0) {
            if ($option.parent().length) {
                    $prev = $option;
                return;
            }
            if (!$prev) $select.prepend($option);
            else $prev.after($option);
            $prev = $option;
        }
        else {
              $option.remove();
        }
    });
}

`

JSFiddle： https://jsfiddle.net/derrh5tr/

3
Wim Barelds

3年遅れですが、グーグルでここに来てくれたので、うまくいけば私の答えが他の人に役立つことを願っています。

2番目のオプション（CSSで隠した）を作成し、Javascriptを使用してsを前後に移動しました。

<select multiple id="sel1">
  <option class="set1">Blah</option>
</select>
<select multiple id="sel2" style="display:none">
  <option class="set2">Bleh</option>
</select>

そのようなもの、そしてこのようなものはリストにアイテムを移動します（すなわち、それを見えるようにします）。目的に応じて、必要に応じてコードを変更してください。

$('#sel2 .set2').appendTo($('#sel1'))
3
SpoonNZ

オブジェクトを保持し、短期間でフィルタリングすれば可能です。

<select id="driver_id">
<option val="1" class="team_opion option_21">demo</option>
<option val="2" class="team_opion option_21">xyz</option>
<option val="3" class="team_opion option_31">ab</option>
</select>

-

team_id= 31;

var element = $("#driver_id");
originalElement = element.clone();  // keep original element, make it global


element.find('option').remove();   
originalElement.find(".option_"+team_id).each(function() { // change find with your needs
        element.append($(this)["0"].outerHTML); // append found options
});

https://jsfiddle.net/2djv7zgv/4/

2
Fatih Alp

後でオプションを再追加することを述べたので、ページのロード時に選択ボックスの内容を配列またはオブジェクトにロードすることをお勧めします。復元する必要があります。

選択の最初の要素を削除してから、復元ボタンで選択ボックスを元の状態に戻す簡単な例を作成しました。

http://jsfiddle.net/CZcvM/

1
JayTee

これは、@ NeverEndingLearnerの回答の拡張バージョンです。

  • サポートされていないCSSを使用しないための完全なブラウザサポート
  • 予備役
  • 複数のラッピングはありません
$("#hide").click(function(){
  $("select>option.hide").wrap('<span>'); //no multiple wrappings
});

$("#show").click(function(){
  $("select span option").unwrap(); //unwrap only wrapped
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<select>
    <option class="hide">Hide me</option>
    <option>visible option</option>
</select>
<button id="hide">hide</button>
<button id="show">show</button>
1
xam

純粋なJSの場合：

select = document.getElementById("select_id")                   
to_hide = select[select.selectedIndex];
to_hide.setAttribute('hidden', 'hidden');

ただ再表示する

to_hide.removeAttr('hidden');

または

to_hide.hidden = false;
1
Andrey Suglobov

私は明るいと思った;-)

CSSで：

option:disabled {display:none;}

FirefoxおよびChromeでは、有効なオプションのみを持つ選択が作成されました。いいね.

IEでは、有効なオプションが表示され、元の場所の空白行だけが無効になっています。悪い。

Edgeでは、上部に有効なオプションが表示され、その後に無効なオプションの空白行が続きます。許容できます。

0
Leif Neland

これを試して：

$(".hide").css("display","none");

しかし、私はそれを隠すことは意味をなさないと思います。削除したい場合は、次のようにします。

$(".hide").remove();
0
Tee Wu

必要に応じてdave1010のコードを変更するだけです

 (function($){
    $.fn.extend({hideOptions: function() {
        var s = this;
        return s.each(function(i,e) {
            var d = $.data(e, 'disabledOptions') || [];
            $(e).find("option[disabled=\"disabled\"]").each(function() {
                d.Push($(this).detach());
            });
            $.data(e, 'disabledOptions', d);
        });
    }, showOptions: function() {
        var s = this;
        return s.each(function(i,e) {       
            var d = $.data(e, 'disabledOptions') || [];
            for (var i in d) {
                $(e).append(d[i]);
            }
        });
    }});    
})(jQuery);

http://jsfiddle.net/AbzL3/1/

0
pavlickm