jquery - 如何根据 HTML 选择元素具有的选项数量设置其样式？

Question

我想做的是根据选择框具有的选项数量来更改选择框的样式。更具体地说，当只有一个选项时，我希望它看起来像一个 span ，否则就像一个典型的 select 元素。换句话说，我想隐藏在没有选择的情况下做出选择的可能性。

到目前为止，我找到的唯一解决方案是使用 jQuery 和另一个 SO answer 将标签类型从 select 来回更改为 span ，但由于这与样式有关，所以我想了解纯 CSS 解决方案(或至少 CSS + jQuery 解决方案)。

Answer 1

DEMO FIDDLE

CSS

select { 
    border: none;
    -webkit-appearance: none;
    font: inherit; 
}

select::-ms-expand {
    display: none;
}

select:focus {
    outline:none; 
    outline-offset:0; 
}

select > option {
    display:none; 
}

这些选择的样式只能应用于 <select>只有一个 <option> 的元素

DEMO FIDDLE

jQuery

$('select').each(function(i, el) {
    if ($(el).children().length == 1) {
        $(el).css("display", "none"); // Hide it
        var optionVal = $(el).children().eq(0).text();
        $(el).after($("<span>" + optionVal + "</span>"));
    }
});

这将循环遍历每个 <select>在您的页面上，然后检查它是否有一个选项。如果是，它将隐藏选择并在后面插入一个跨度。