CSS 根据 HTML 选择选项值选择另一个元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16452634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS to select another Element based on a HTML Select Option Value
提问by hannson
Is there a CSS selector that allows me to select an element based on an HTML select option value?
是否有 CSS 选择器允许我根据 HTML 选择选项值选择元素？
<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>
I'm looking for an HTML/CSS only method to only display a selected number of form fields. I already know how to do it with Javascript.
我正在寻找一种仅 HTML/CSS 的方法来仅显示选定数量的表单字段。我已经知道如何用 Javascript 做到这一点。
Is there a way to do this?
有没有办法做到这一点？
Edit:
编辑：
The question title is perhaps misleading. I'm not trying to style the select box, that's pretty common and plenty of answers on SO already. I'm was actually trying to style the <P>element based on the value selected in the <select>.
问题标题可能具有误导性。我不是要设计选择框的样式，这很常见，而且已经有很多关于 SO 的答案。我实际上是在尝试<P>根据<select>.
How ever what I'm really trying to do is to display a number of form fields based on a selected numeric value:
我真正想做的是根据选定的数值显示多个表单字段：
<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>
I would like to display div.stuff-1and div.stuff-2when number-of-stuffs=2 and display div.stuff-1div.stuff-2and div.stuff-3when number of stuffs=2.
我想显示div.stuff-1和div.stuff-2当数的食料= 2且display div.stuff-1div.stuff-2以及div.stuff-3当东西= 2的数。
Something like this fiddle
像这个小提琴一样的东西
回答by Kevin Bowersox
Its called an attribute selector
它称为属性选择器
option[value="1"]
{
background-color:yellow;
}
Examplehttp://jsfiddle.net/JchE5/
回答by adnrw
You can use
您可以使用
select option[value="1"]
select option[value="1"]
but browser support won't be fantastic.
但浏览器支持不会很棒。
回答by hannson
This probably requires a parent selectorwhich has not been specified for CSS2 or CSS3.
这可能需要一个尚未为 CSS2 或 CSS3 指定的父选择器。
A subject selectorhas been defined in the CSS4 working draftas of May 2013 but no browser vendor has implemented it yet.
一个主题选择已在CSS4工作草案定义为2013年5月，但没有浏览器厂商已经实现它。
Whether the method in question works (in theory) using the subject selector remains to be seen.
所讨论的方法是否（理论上）使用主题选择器仍然有待观察。
回答by LGT
How about this alternative?
这个替代方案怎么样？
HTML:
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:
CSS：
div {
display: none;
}
input:checked + div {
display: block;
}
You can also use labeland hide (multiple ways) the inputif needed.. I admit this requires some tinkering to display the inputand divgroups apart, but I think it's worth it.
如果需要，您还可以使用label和隐藏（多种方式）input.. 我承认这需要一些修补才能将input和div组分开，但我认为这是值得的。
回答by LGT
i believe that in "live" or realtime, it is possible only with javascript or jQuery. Wrap the potentially hidden fields in divs with display: noneonLoad and have JS or jQuery change state to display: blockor however you like.
我相信在“实时”或实时中，只有使用 javascript 或 jQuery 才有可能。使用display: noneonLoad将潜在隐藏的字段包装在 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
i am using in one of my apps...
我在我的一个应用程序中使用...
Possible with PHP too, but with PHP, you will have to send the change request or you can write a code in php to have certain classes to be loaded based on already selected values, for example
也可以使用 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>
