CSS per selezionare un altro elemento basato su un valore di selezione HTML Valore

Question

C'è un selettore CSS che mi consente di selezionare un elemento basato su un valore di opzione di selezione 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> 

Sto cercando un HTML/CSS unico metodo per visualizzare solo un numero selezionato di campi del modulo. So già come farlo con Javascript.

C'è un modo per farlo?

---

Edit:

Il titolo questione è forse fuorviante. Non sto cercando di definire la casella di selezione, è abbastanza comune e ci sono già molte risposte su SO. In realtà stavo cercando di definire l'elemento <P> in base al valore selezionato nello <select>.

Come mai quello che sto davvero cercando di fare è quello di visualizzare una serie di campi di modulo in base a un valore numerico selezionato:

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

Vorrei visualizzare div.stuff-1 e div.stuff-2 quando il numero-di-animali = 2 e display div.stuff-1div.stuff-2 e div.stuff-3 quando il numero di articoli = 2.

qualcosa di simile fiddle

Answer 1

La sua chiamata attribute selector

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

Esempiohttp://jsfiddle.net/JchE5/

Answer 2

È possibile utilizzare

select option[value="1"]

ma il supporto del browser non sarà fantastico.

Answer 3

credo che in "live" o in tempo reale, è possibile solo con javascript o jQuery. Avvolgi i campi potenzialmente nascosti in div con display: none onLoad e fai in modo che JS o jQuery cambino lo stato su display: block o come preferisci.

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

sto usando in una delle mie applicazioni ...

Possibile con PHP troppo, ma con PHP, si dovrà inviare la richiesta di modifica o si può scrivere un codice php per avere una certa classi da caricare in base ai valori già selezionati, ad esempio

<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

Ciò richiede probabilmente un selettore genitore che non è stato specificato per CSS2 o CSS3.

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

Un selettore soggetto è stato defined in the CSS4 working draft a partire da maggio 2013, ma nessun fornitore del browser ha ancora attuato.

Se il metodo in questione funziona (in teoria) utilizzando il selettore soggetto rimane da vedere.

Answer 5

Che ne dici di questa alternativa?

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

È anche possibile utilizzare label e nascondere (più modi) il input se necessario .. lo ammetto questo richiede un po 'di armeggiare per visualizzare il input e div gruppi a parte, ma penso che ne valga la pena.