是否可以针对选择了特定选项的 <select> 进行定位？答案

【问题标题】：Is it possible to target a <select> with a specific option selected?是否可以针对选择了特定选项的 <select> 进行定位？
【发布时间】：2013-08-10 20:33:56
【问题描述】：

假设我有以下 HTML：

<select>
    <option value="0">Closed</option>
    <option value="1">Open</option>
</select>

我想为 <select> 添加一个边框，这取决于当前选择的值：

选择Closed 时的红色边框
选择Open 时的绿色边框

是否有一个 CSS 选择器仅在 <select> 的值为 0 或 1 时将其作为目标？

【问题讨论】：

我不明白你想要实现什么，你能提供一张图片或小提琴
你需要 jQuery 来做这个。

标签： html css css-selectors

【解决方案1】：

如果你使用 jquery，你可以做这样的事情

$(".select_box").on('change',function(){
if($(".select_box").find(":selected").text() == 'Open'){
    $(".select_box").css('border-color','green');
}
else{
    $(".select_box").css('border-color','red');
}
});

the complete fiddle

【讨论】：

【解决方案2】：

这在纯 CSS 中是不可能的，因为 CSS 对所选下拉列表 options 没有任何理解。（即使是这样，也无法匹配 option 然后返回到父 select）。

因此，JavaScript 是您唯一的选择。我可以提供一个示例，但您没有标记问题 JavaScript，所以我不知道这是否适合您。

【讨论】：

【解决方案3】：

不，您不能仅使用 CSS 来做到这一点。使用 Javascript 或 jQuery。例如：-$('#id :selected')

【讨论】：