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

Posted 2023-03-05

【中文标题】CSS 根据 HTML 选择选项值选择另一个元素

【英文标题】：CSS to select another Element based on a HTML Select Option Value

【发布时间】：2013-05-03 09:20:41

【问题描述】：

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

【问题讨论】：

可能重复：***.com/questions/1895476/…

您可以使用option[value="1"] 之类的属性选择器来选择它，但浏览器支持不是很好，Firefox 允许您添加样式，但 chrome 不能。我不认为有一种方法可以根据在没有 JavaScript/jQuery 的情况下选择的选项显示段落。

这是一个测试，显示哪些浏览器支持属性选择器 - dev.l-c-n.com/CSS3-selectors/browser-support.php

【参考方案1】：

它被称为attribute selector

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

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

【讨论】：

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

更新问题：我并不是真的要选择 option 元素，而是要根据选择的选项来选择 p 元素。

【参考方案2】：

你可以使用

select option[value="1"]

但浏览器支持不会很好。

【讨论】：

他不是指浏览器对选择器的支持——他指的是选择和选项标签的样式。

【参考方案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';elseecho 'class2';">
   <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

【参考方案4】：

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

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

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

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

【参考方案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>

【参考方案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。