web-dev-qa-db-fra.com

CSS pour sélectionner un autre élément basé sur une valeur d'option de sélection HTML

Existe-t-il un sélecteur CSS qui me permet de sélectionner un élément en fonction d'une valeur d'option de sélection 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>

Je recherche une méthode HTML/CSS uniquement pour afficher uniquement un nombre sélectionné de champs de formulaire. Je sais déjà comment le faire avec Javascript.

Y a-t-il un moyen de faire cela?

Modifier:

Le titre de la question est peut-être trompeur. Je n'essaie pas d'appeler la zone de sélection, c'est assez courant et déjà beaucoup de réponses sur SO. J'essayais en fait de styler l'élément <P> en fonction de la valeur sélectionnée dans le <select>.

Cependant, ce que j'essaie vraiment de faire, c'est d'afficher un certain nombre de champs de formulaire en fonction d'une valeur numérique sélectionnée:

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

J'aimerais afficher div.stuff-1 et div.stuff-2 lorsque number-of-stuffs = 2 et display div.stuff-1div.stuff-2 et div.stuff-3 lorsque number of stuffs = 2.

Quelque chose comme ça violon

htmlcsscss-selectors
26
hannson

On l'appelle un sélecteur d'attribut

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

Exemple _ ​​ http://jsfiddle.net/JchE5/

22
Kevin Bowersox

Vous pouvez utiliser

select option[value="1"] 

mais le support du navigateur ne sera pas fantastique.

3
adnrw

Cela nécessite probablement un sélecteur parent qui n'a pas été spécifié pour CSS2 ou CSS3.

Un sélecteur sujet a été défini dans le brouillon CSS4 en mai 2013, mais aucun fournisseur de navigateur ne l'a encore implémenté.

Reste à savoir si la méthode en question fonctionne (en théorie) à l'aide du sélecteur de sujet.

2
hannson

je crois qu'en "live" ou en temps réel, il est possible uniquement avec javascript ou jQuery. Enveloppez les champs potentiellement masqués dans les divs avec display: none onLoad et faites en sorte que JS ou jQuery passe à display: block ou à votre guise.

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

j'utilise dans l'une de mes applications ...

Possible également avec PHP, mais avec PHP, vous devrez envoyer la demande de modification ou vous pouvez écrire un code en php pour que certaines classes soient chargées en fonction de valeurs déjà sélectionnées, par exemple

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

Que diriez-vous de cette alternative?

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:

div {
    display: none;
}

input:checked + div {
    display: block;
}

Vous pouvez également utiliser label et masquer (plusieurs façons) la input si nécessaire .. J'admets que cela nécessite un peu de bricolage pour afficher les groupes input et div, mais je pense que cela en vaut la peine.

0
LGT