基于HTML Select选项值的CSS选择另一个元素

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完成此操作。

有没有办法实现这个功能？

---

编辑：

问题标题可能有误导性。我并不是试图为选择框设置样式，这在SO上已经很常见并且有很多答案。我实际上是想根据在中选择的值来设置< 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> 我希望显示 div.stuff-1 和 div.stuff-2，当物品数量为2时，显示div.stuff-1和div.stuff-2和div.stuff-3。这里有一个类似于fiddle的示例。

- hannson

---

可能重复：https://dev59.com/YXI-5IYBdhLWcg3wW3Cp - Mark

你可以使用属性选择器来选择它，例如 option[value="1"]，但浏览器支持并不是很好，Firefox 可以添加样式，但 Chrome 不行。我认为没有办法在没有 JavaScript/jQuery 的情况下根据所选选项显示段落。 - ferne97

这里有一个测试，展示哪些浏览器支持属性选择器 - http://dev.l-c-n.com/CSS3-selectors/browser-support.php - klewis

Answer 1

它被称为属性选择器

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

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

- Kevin Bowersox

---

他不想在那个值上显示一个div而不是对其进行样式设置吗？ - Praveen Puglia

更新的问题：我不是真正地想选择选项元素，而是想根据所选选项选择p元素。 - hannson

Answer 2

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

• 包含bar的foo的CSS选择器是什么？
• 是否有CSS父选择器？

主题选择器自2013年5月起已在CSS4工作草案中定义，但没有浏览器供应商实现它。

无论所讨论的方法是否在理论上使用主题选择器，仍有待观察。

- hannson

Answer 3

你可以使用 select option[value="1"]，但是浏览器支持并不完美。

- adnrw

---

他并不是指选择器的浏览器支持，而是指对于select和option标签的样式。 - Luca Steeb

Answer 4

下面的替代方案怎么样？

你不会得到一个选择框，但也许这已经足够接近了。 #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>

- LGT

Answer 5

我相信在“实时”或“即时”的情况下，只有使用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>

- user2119249

Answer 6

我发现基于这个答案的解决方案最符合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。

- SdtElectronics