jQuery 选择下拉选项，只有一个非空白选项答案

【问题标题】：jQuery select dropdown option with only one non-blank optionjQuery 选择下拉选项，只有一个非空白选项
【发布时间】：2012-08-01 18:02:20
【问题描述】：

我正在处理一个店面包（所以我没有编辑核心文件的选项），我们有下拉菜单来选择用户想要名片的正面和背面。有些卡片只有一个选项，所以如果只有一个选项，客户希望隐藏下拉菜单。

简单吧？

$("select").each(function(){
    var count = $(this).children("option").length;
    if ( count == 1 ) {
        // there's only one option, do something
    }
});

这可行，但问题是系统有时会为某些下拉菜单生成空白<option>，因此实际上有两个选项，但只有一个“真实”选项：

<select>
    <option></option>
    <option value="Something">A real option</option>
</select>

基本上，我需要选择只有一个<option> 的<select>s，或者两个<option>s 而一个是空的。

我无法完全理解这种 if 语句的逻辑，所以如果有人有任何建议，将不胜感激。

【问题讨论】：

您可能只需将选择器更改为option[value] 或option:not(:empty)，具体取决于空的选择器是否始终完全为空且没有值和文本
根据给出的例子，<option></option> 总是这样吗？如果是这样，您可以删除 <option> 标签中没有文本或没有 value 属性或 value 属性为空字符串的标签。

标签： jquery html html-select

【解决方案1】：

您可以使用not 方法和:empty 选择器：

$("select").each(function(){
    var count = $(this).find("option").not(':empty').length;
    if ( count == 1 ) {
        alert('okay')
    }
});

DEMO

【讨论】：

哦，嘿，这比我的解决方案更好。
老实说，我不敢相信我以前没想到这一点……如此简单。谢谢！

【解决方案2】：

改变你计算它们的方式：

$('select').each(function() {
    var count = 0;
    $(this).children('option').each(function() {
        if ( $(this).text() ) // true if not empty
        {
            ++count;
        }
    });
    if ( count == 1 ) // count only includes non-empty options

应该可以解决。

【讨论】：