Question

我正在尝试基本上“选择”可见的选项，并使用css隐藏某些选项。

我的两个问题是：a：Css display none on options实际上并没有隐藏选项。所以我假设这就是为什么jquery无法确定它是否可见？

HTML：

<select form="id" name="horse_discipline" id="horse_discipline" class="">
    <option value="null">Please Choose</option>
    <option value="mature_working_or_spelling">Mature – Working or Spelling</option>
    <option value="pregnant_1_8_months">Pregnant 1-8 Months</option>
    <option value="pregnant_9_-11_months">Pregnant 9-11 Months</option>
    <option value="lactating">Lactating</option>
    <option value="weanling">Weanling</option>
    <option value="yearling">Yearling</option>
    <option value="2_year_old_working_or_spelling">2 Year Old - Working or Spelling</option>
    <option value="breeding_stallion">Breeding Stallion</option>
    <option value="aged">Aged</option>
</select>

如果我检查我的select元素和内部选项，使用以下css规则，它看起来像是应用了css，但是忽略了该选项的显示。

option[value="weanling"] {display:none;}

我的问题是，是否可以选择jquery和css组合可见或不可见的选项。

$('select#horse_discipline option').each(function(){
     var visible = $(this).is(':visible');
     // Do something with visible var
})

DEMO：http://jsfiddle.net/vgLhU/1/

Answer 1

尝试使用不符合HTML的span包装您的选项。这应该跨浏览器工作。也许按需填充选项是一个更好的主意。我经常使用像Handlebars.JS这样的JavaScript模板引擎。

Answer 2

似乎disabled属性是这里的方式，我将不得不使用一些javascript来添加属性，但似乎它更受支持。

<select form="id" name="horse_discipline" id="horse_discipline" class="">
    <option value="null">Please Choose</option>
    <option value="mature_working_or_spelling">Mature – Working or Spelling</option>
    <option value="pregnant_1_8_months">Pregnant 1-8 Months</option>
    <option value="pregnant_9_-11_months" disabled>Pregnant 9-11 Months</option>
    <option value="lactating">Lactating</option>
    <option value="weanling">Weanling</option>
    <option value="yearling">Yearling</option>
    <option value="2_year_old_working_or_spelling" disabled="disabled">2 Year Old - Working or Spelling</option>
    <option value="breeding_stallion">Breeding Stallion</option>
    <option value="aged">Aged</option>
</select>

Javscript：

$('select#horse_discipline option').each(function(){
     var disabled = $(this).is(':disabled');
     if (!disabled) {
          // Do something with the disabled option
     }
})

DEMO :: http://jsfiddle.net/vgLhU/2/

使用jquery查找隐藏选项

2 个答案: