Question

是否有CSS选择器允许我根据HTML select选项值选择元素？

<select>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<p>Display only if an option with value 1 is selected</p>

我正在寻找一种仅用于HTML / CSS的方法，只显示选定数量的表单字段。我已经知道如何使用Javascript。

有办法做到这一点吗？

修改

问题标题可能会产生误导。我不是要尝试选择框的样式，这已经非常普遍并且已经有很多答案了。我实际上是在尝试根据<P>中选择的值设置<select>元素的样式。

我真正想做的是根据选定的数值显示多个表单字段：

<select name="number-of-stuffs">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<div class="stuff-1">
     <input type="text" name="stuff-1-detail">
     <input type="text" name="stuff-1-detail2">
</div>
<div class="stuff-2" style="display:none"> 
     <input type="text" name="stuff-2-detail">
     <input type="text" name="stuff-2-detail2">
</div>
<div class="stuff-3" style="display:none">
     <input type="text" name="stuff-3-detail">
     <input type="text" name="stuff-4-detail2">
</div>

我想在填充数量= 2时显示div.stuff-1和div.stuff-2，在填充数量= 2时显示display div.stuff-1 div.stuff-2和div.stuff-3

像这样fiddle

Answer 1

它被称为attribute selector

option[value="1"]
{
background-color:yellow;
}

示例 http://jsfiddle.net/JchE5/

Answer 2

您可以使用

select option[value="1"]

但浏览器支持不会很棒。

Answer 3

这可能需要一个尚未为CSS2或CSS3指定的父选择器。

CSS selector for "foo that contains bar"?

Is there a CSS parent selector?

截至2013年5月，主题选择器已defined in the CSS4 working draft，但尚未实施任何浏览器供应商。

有问题的方法（理论上）是否有效使用主题选择器还有待观察。

Answer 4

我相信在“实时”或实时中，只有javascript或jQuery才有可能。使用display: none onLoad将潜在隐藏字段包含在div中，并将JS或jQuery更改为display: block或者您喜欢的状态。

//Show Hide based on selection form Returns
$(document).ready(function(){

//If Mobile is selected
$("#type").change(function(){
    if($(this).val() == 'Movil'){
     $("#imeiHide").slideDown("fast"); // Slide down fast
    } else{
     $("#imeiHide").slideUp("fast"); //Slide Up Fast
    }
});

//If repairing is selected
$("#type").change(function(){
if($(this).val() == 'repairing'){


$("#problemHide").slideDown("fast"); // Slide down fast
$("#imeiHide").slideDown("fast"); // Slide down fast
}else{
$("#problemHide").slideUp("fast"); //Slide Up Fast
}
});
});
// type is id of <select>
// Movil is option 1
// Repairing is option 2
//problemHide is div hiding field where we write problem
//imeiHide is div hiding field where we write IMEI

我在我的一个应用程序中使用...

也可以使用PHP，但是使用PHP，您必须发送更改请求，或者您可以在php中编写代码以根据已选择的值加载某些类，例如

<select class="<?php if($valueOne == 'Something'){echo 'class1';}else{echo 'class2';}">
   <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

Answer 5

这个替代方案怎么样？

HTML：

<input name="number-of-stuffs" type="radio" value="1" />
<div>
    <input type="text" name="stuff-1-detail" />
    <input type="text" name="stuff-1-detail2" />
</div>
<input name="number-of-stuffs" type="radio" value="2" />
<div>
    <input type="text" name="stuff-2-detail" />
    <input type="text" name="stuff-2-detail2" />
</div>
<input name="number-of-stuffs" type="radio" value="3" />
<div>
    <input type="text" name="stuff-3-detail" />
    <input type="text" name="stuff-4-detail2" />
</div>

CSS：

div {
    display: none;
}

input:checked + div {
    display: block;
}

如果需要，您还可以使用label并隐藏（多种方式）input ..我承认这需要一些修改以显示input和div组，但我认为这是值得的。

Answer 6

我找到了一个基于 Xcode Archive debug strip errors 的解决方案最满足op的要求。不完全是 CSS，但肯定涉及最少的 JavaScript。

   a  b   c  d  x
0  3  4   3  2  2
1  5  2   6  2  3
2  6  4  12  2  4

select[data-chosen='1']~.stuff-1{ 
    display: block !important;
}

select:not([data-chosen='1'])~.stuff-1{ 
    display: none;
}

select[data-chosen='2']~.stuff-2{ 
    display: block !important;
}

select[data-chosen='3']~.stuff-3{ 
    display: block !important;
}

您甚至不需要编写任何单独的 js，尽管在 <select name="number-of-stuffs" data-chosen = "1" onchange = "this.dataset.chosen = this.value;"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <div class="stuff-1"> <span> I am stuff-1!</span> <input type="text" name="stuff-1-detail"> <input type="text" name="stuff-1-detail2"> </div> <div class="stuff-2" style="display:none"> <span> I am stuff-2!</span> <input type="text" name="stuff-2-detail"> <input type="text" name="stuff-2-detail2"> </div> <div class="stuff-3" style="display:none"> <span> I am stuff-3!</span> <input type="text" name="stuff-3-detail"> <input type="text" name="stuff-4-detail2"> </div> 中嵌入 "this.dataset.chosen = this.value;" 似乎有点笨拙。

CSS根据HTML选择选项值选择另一个元素

6 个答案: