2012-03-09 19 views
6

में कोई अन्य विकल्प चुनता हूं तो टेक्स्टबॉक्स को सक्रिय करने का तरीका मान लीजिए मेरे पास एक ड्रॉप डाउन बॉक्स में 3 विकल्प लाल, नीले, अन्य कहते हैं। यदि कोई उपयोगकर्ता किसी अन्य विकल्प के रूप में विकल्प चुनता है तो टेक्स्ट बॉक्स के नीचे अपने पसंदीदा रंग को wrtie के लिए दृश्यमान होना चाहिए। मैं रंगों के साथ ड्रॉप डाउन बॉक्स को पॉप्युलेट कर सकता हूं लेकिन ड्रॉप-डाउन बॉक्स में दूसरों के चयन पर टेक्स्टबॉक्स को कैसे दिखाना है, यह नहीं पता। मुझे पता है कि जावास्क्रिप्ट का उपयोग करना संभव है लेकिन मैं जावास्क्रिप्ट के लिए काफी नया हूं। क्या कोई मेरी मदद कर सकता है बाहर ??यदि मैं ड्रॉप डाउन बॉक्स

इस विकल्प का चयन करें मैं अपने एचटीएमएल के रूप में लागू करने हूँ

<select name="color"> // color 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 

<input type="text" name="color" id="color" /></td> // this textbox should be hidden //until unless others is selected in the drop down box 

उत्तर

24
नीचे

मूल जावास्क्रिप्ट है जिसे आपको लिखने की आवश्यकता है:

<html> 
<head> 
<script type="text/javascript"> 
function CheckColors(val){ 
var element=document.getElementById('color'); 
if(val=='pick a color'||val=='others') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

</script> 
</head> 
<body> 
    <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
    </select> 
<input type="text" name="color" id="color" style='display:none;'/> 
</body> 
</html> 
+0

ठीक है .. अब मैं अपने प्रश्न में एक गलती को समझ सकता हूं। मैं एक खाली क्षेत्र को संसाधित नहीं करना चाहता हूं। यहां इस मामले में टेक्स्ट बॉक्स केवल अदृश्य है। मैं चाहता हूं कि यह मेरे रूप में अदृश्य और सक्रिय हो, केवल अगर मैं दूसरों का चयन करता हूं। मैं रिक्त फ़ील्ड को संसाधित नहीं करना चाहता क्योंकि यह डेटाबेस में vale डालने के दौरान एक त्रुटि दिखाएगा। –

+0

@Umesh में चिप करने के लिए खेद है ... मैं इसे काम पर नहीं ला सकता क्योंकि पाठ इनपुट कुछ कारणों से चुनिंदा विकल्पों को अस्वीकार करता है। मदद? मेरा मतलब है, जावास्क्रिप्ट काम करता है और सबकुछ लेकिन यह ड्रॉप डाउन से मूल्यों को पोस्ट नहीं करेगा ... केवल टेक्स्ट इनपुट – gavin

+0

@gavin क्या आपने कभी भी टेक्स्ट इनपुट को ओवरराइट करने के मुद्दे को हल किया है क्योंकि मेरे पास एक ही समस्या है ? –

2

इनलाइन है:

<select 
onchange="var val = this.options[this.selectedIndex].value; 
this.form.color[1].style.display=(val=='others')?'block':'none'"> 

मैं इस

सिर में (चुनिंदा एक आईडी दे करते थे):

window.onload=function() { 
    var sel = document.getElementById('color'); 
    sel.onchange=function() { 
    var val = this.options[this.selectedIndex].value; 
    if (val == 'others') { 
     var newOption = prompt('Your own color',''); 
     if (newOption) { 
     this.options[this.options.length-1].text = newOption; 
     this.options[this.options.length-1].value = newOption; 
     this.options[this.options.length] = new Option('other','other'); 
     } 
    } 
    } 
} 
7

पर http://jsbin.com/orisuv

एचटीएमएल एक उदाहरण कोडित

<select name="color" onchange='checkvalue(this.value)'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 
<input type="text" name="color" id="color" style='display:none'/> 

जावास्क्रिप्ट

function checkvalue(val) 
{ 
    if(val==="others") 
     document.getElementById('color').style.display='block'; 
    else 
     document.getElementById('color').style.display='none'; 
} 
1

सीधे शब्दों में

<select id = 'color2' 
     name = 'color' 
     onchange = "if ($('#color2').val() == 'others') { 
         $('#color').show(); 
        } else { 
         $('#color').hide(); 
        }"> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
</select> 

<input type = 'text' 
     name = 'color' 
     id = 'color' /> 

संपादित करें: आवश्यकता है JQuery प्लगइन

+2

कुछ छोटे जावास्क्रिप्ट काम के लिए jQuery का उपयोग क्यों करें? –

+0

छोटा और neater, यह वही है जो मैं उपयोग करता हूं, मेरे पास हमेशा jquery संलग्न है – CKKiller

+1

आपको जवाब में इसका उल्लेख करना चाहिए था। ओपी इस जवाब को आजमा सकता है और कई त्रुटियों को समाप्त कर सकता है: पी –

0

चूंकि उमेश पाटिल के उत्तर में टिप्पणी है कि समस्या है। मैं उत्तर संपादित करने और अस्वीकार करने का प्रयास करता हूं। और नया उत्तर पोस्ट करने के लिए सुझाव प्राप्त करें। इस कोड को उनके पास समस्या का समाधान करना चाहिए (शशि रॉय, गेवेन, जॉन हिगिन्स)।

<html> 
<head> 
<script type="text/javascript"> 
function CheckColors(val){ 
var element=document.getElementById('othercolor'); 
if(val=='others') 
    element.style.display='block'; 
else 
    element.style.display='none'; 
} 

</script> 
</head> 
<body> 
    <select name="color" onchange='CheckColors(this.value);'> 
    <option>pick a color</option> 
    <option value="red">RED</option> 
    <option value="blue">BLUE</option> 
    <option value="others">others</option> 
    </select> 
<input type="text" name="othercolor" id="othercolor" style='display:none;'/> 
</body> 
</html> 
संबंधित मुद्दे