30

是否有 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 的答案。我实际上是在尝试<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材料数量=2时。div.stuff-2display div.stuff-1 div.stuff-2div.stuff-3

像这样的小提琴

4

6 回答 6

23

它被称为属性选择器

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

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

于 2013-05-09T00:56:29.433 回答
3

您可以使用

select option[value="1"]

但浏览器支持不会很棒。

于 2013-05-09T00:57:01.580 回答
3

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

截至 2013 年 5 月，CSS4 工作草案中已经定义了主题选择器，但还没有浏览器供应商实现它。

所讨论的方法是否（理论上​​）使用主题选择器仍有待观察。

于 2013-05-10T10:41:35.483 回答
2

下面的替代方案怎么样？

你没有得到一个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>

于 2017-03-28T00:52:36.730 回答
1

我相信在“实时”或实时中，只有使用 javascript 或 jQuery 才有可能。使用 onLoad 将可能隐藏的字段包装在 div 中，display: none并让 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>
于 2013-05-09T01:06:22.170 回答
0

我找到了一个基于这个答案的解决方案， 最能满足 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，尽管嵌入"this.dataset.chosen = this.value;"似乎onchange有点 hacky。

于 2021-02-14T04:14:33.447 回答