表示されているオプション要素の長さは常に「0」を表示します

Question

lengthの表示option要素を知りたいだけです。

すべての要素に同じ値があります。にはが必要です。

次のコードは常に0と表示されます。

助けてください。

$('select option[data-id=2]').hide(); 
 
var exist = $('select option[value=1]:visible').length; 
 
alert(exist);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value='1'>test 1</option> 
 
    <option value='1' data-id='2'>test 2</option> 
 
</select>

スクリーンショット：

Answer 1

$('select option[data-id=2]').hide(); 
 

 
var length = $('select option[value=1]').filter(function() { 
 
    return $(this).css('display') != 'none'; 
 
}).length; 
 

 
alert(length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value='1'>test 1</option> 
 
    
 
    <option value='1' data-id='2'>test 2</option> 
 
</select>

チェックのこの方法を試してみてください。それをフィルタリングし、表示ブロックが長さをカウントするかどうか確認してください。

Answer 2

Firefoxで実行すると1になりますが、Chromeで実行すると0になります。

Chromeがselect要素全体を表示する前にコードを実行しているため、Firefoxがselect要素を表示した後にコードを実行するようになっているようです。

次の例ではFirefoxで0が表示されていますが、Chromeでは0と2が表示されます。

var exist = $('option:visible').length; 
 
alert(exist); 
 
exist = $('option:hidden').length; 
 
alert(exist);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select> 
 
    <option value='1'>test 1</option> 
 
    <option value='1' data-id='2'>test 2</option> 
 
</select>

あなたがそう、noneオプションは、このプロパティdisplayを持っているか否かを確認され、可視1のために、それが定義されていないので、ないので述べ作品をguradioソリューション条件は真です。

しかし、表示プロパティに関係なく、この要素が実際に表示されているかどうかを尋ねるコードがjQueryに問い合わせていました。

Chromeがこのように実際に動作する理由はわかりません。コードをスタンドアロンのHTMLページに入れても問題は解決しません。

編集：

オーウェンは、異なるブラウザ間の非定義された行動を指摘したように私たちは、Firefoxの動作から見ることができるように、すべてのオプションが、関係なく、displayプロパティの隠されたと考えられていることをjQueryのstates clearlyていても、そうです。

結論として、displayプロパティを設定してチェックし、ネガティブには:selectedと:not(:selected)などの他のセレクタを使用することをお勧めします。