使用 jquery 查找隐藏选项答案

【问题标题】：Find hidden options with jquery使用 jquery 查找隐藏选项
【发布时间】：2014-07-29 07:40:32
【问题描述】：

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

我的两个问题是：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 规则检查我的选择元素和里面的选项，看起来好像正在应用 css，但选项的显示被忽略了。

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

【问题讨论】：

你能包含你的 HTML 吗？
您检查选项何时可见的代码正在 DOM 就绪上运行，此时由于选择未打开，所有选项均不可见。如果您的意思不同，请向我们展示一些显示确切问题的代码。
即使我打开选择菜单，css 也不会应用于它选择的选项，它仍然可见@winterblood
我在 Chrome 36 或 Firefox 31 中看不到该选项。
Chrome

标签： jquery html css select

【解决方案1】：

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

【讨论】：

在spans 中包装options 会创建无效的HTML，并且更有可能导致跨浏览器问题。
我提到了这一点。我认为可以使用 whis 另一方面不是 CSS，但 jQuery 选择器应该找到这个。

【解决方案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>

JavaScript：

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

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

【讨论】：