सीएसएस एचटीएमएल चयन विकल्प के आधार पर एक और तत्व का चयन करने के लिए मूल्य

Question

क्या कोई सीएसएस चयनकर्ता है जो मुझे 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/सीएसएस केवल प्रपत्र फ़ील्ड्स के एक चयनित संख्या प्रदर्शित करने के एकमात्र तरीका के लिए देख रहा हूँ। मुझे पहले से ही पता है कि जावास्क्रिप्ट के साथ इसे कैसे किया जाए।

क्या ऐसा करने का कोई तरीका है?

---

संपादित करें:

सवाल शीर्षक शायद भ्रामक है। मैं चुनिंदा बॉक्स को स्टाइल करने की कोशिश नहीं कर रहा हूं, यह बहुत आम है और एसओ पर बहुत सारे जवाब हैं। मैं वास्तव में <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> 

मैं div.stuff-1 और div.stuff-2 जब संख्या के- सामान प्रदर्शित करना चाहते हैं = 2 और display div.stuff-1div.stuff-2 और div.stuff-3 जब सामान = 2 की संख्या।

कुछ इस fiddle

Answer 1

इसकी तरह एक attribute selector

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

उदाहरणhttp://jsfiddle.net/JchE5/

Answer 2

आप

select option[value="1"]

उपयोग कर सकते हैं कहा जाता है

लेकिन ब्राउज़र समर्थन शानदार नहीं होगा।

Answer 3

मुझे विश्वास है कि "लाइव" या रीयलटाइम में, यह केवल जावास्क्रिप्ट या jQuery के साथ ही संभव है। display: none ऑनलोड के साथ divs में संभावित रूप से छिपे हुए फ़ील्ड को लपेटें और display: block पर जेएस या jQuery परिवर्तन स्थिति रखें या फिर आपको पसंद है।

//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 में एक कोड लिख सकते हैं कक्षाओं उदाहरण

<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

यह शायद एक माता पिता चयनकर्ता जो सीएसएस 2 या CSS3 के लिए निर्दिष्ट नहीं किया गया है की आवश्यकता है के लिए पहले से ही चयनित मूल्यों पर आधारित लोड करने के लिए,।

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

एक विषय चयनकर्ता मई 2013 के रूप में defined in the CSS4 working draft कर दिया गया है, लेकिन कोई ब्राउज़र विक्रेता अभी तक यह लागू किया गया है।

क्या प्रश्न चयनकर्ता (सिद्धांत में) विषय चयनकर्ता का उपयोग करके देखा जाना बाकी है।

Answer 5

इस विकल्प के बारे में कैसे?

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> 

सीएसएस:

div { 
    display: none; 
} 

input:checked + div { 
    display: block; 
} 

तुम भी label और छिपाने (कई तरीके) का उपयोग कर सकते input यदि आवश्यक हो तो .. मैं मानता यह कुछ input प्रदर्शित करने के लिए संवारता और की आवश्यकता है div समूह अलग हैं, लेकिन मुझे लगता है कि यह इसके लायक है।