是否可以定位选择特定选项的<select>？</select>

Question

说我有以下HTML：

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

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

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

是否有一个CSS选择器，只有当<select>或0的值为1时才定位{{1}}？

Answer 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

Answer 2

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

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

Answer 3

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