jquery - 使用 jquery 查找隐藏的选项

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>

如果我使用以下 css 规则检查我的 select 元素和里面的选项，看起来 css 正在应用，但选项的显示被忽略。

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

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

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

演示:http://jsfiddle.net/vgLhU/1/

Answer 1

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