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

Question

是否有 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>

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

有没有办法做到这一点？

---

编辑：

问题标题可能具有误导性。我不是在尝试设置选择框的样式，这很常见，并且已经有很多关于 SO 的答案。我实际上是在尝试根据<select> 中选择的值设置<P> 元素的样式。

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

<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>

我想在 number-of-stuffs=2 时显示 div.stuff-1 和 div.stuff-2，当 stuffs=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

我相信在“实时”或实时中，只有使用 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 4

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

• CSS selector for "foo that contains bar"?
• Is there a CSS parent selector?

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

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

Answer 5

下面的替代方案怎么样？

您没有得到select 框，但也许这已经足够接近了。

#option-1,
#option-2,
#option-3 {
    display: none;
}

#nos-1:checked ~ #option-1,
#nos-2:checked ~ #option-2,
#nos-3:checked ~ #option-3 {
    display: block;
}

<input id="nos-1" name="number-of-stuffs" type="radio" value="1" checked="checked" /><label for="nos-1">1</label>
<input id="nos-2" name="number-of-stuffs" type="radio" value="2" /><label for="nos-2">2</label>
<input id="nos-3" name="number-of-stuffs" type="radio" value="3" /><label for="nos-3">3</label>
<div id="option-1">
    <input type="text" name="stuff-1-detail" value="1-1" />
    <input type="text" name="stuff-1-detail2" value="1-2" />
</div>
<div id="option-2">
    <input type="text" name="stuff-2-detail" value="2-1" />
    <input type="text" name="stuff-2-detail2" value="2-2" />
</div>
<div id="option-3">
    <input type="text" name="stuff-3-detail" value="3-1" />
    <input type="text" name="stuff-4-detail2" value="3-2" />
</div>

Answer 6

我找到了基于this answer的解决方案 最能满足op的要求。不纯粹是在 CSS 中，但绝对是最少的 JavaScript。

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;
}

<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>

你甚至不需要写任何分离的js，尽管在onchange中嵌入"this.dataset.chosen = this.value;"似乎有点hacky。