जावास्क्रिप्ट - <option>

के भीतर विनिमय मेरे पास अपेक्षाकृत सरल रूप है जो विभिन्न प्रकार के प्रश्न पूछता है। उन प्रश्नों में से एक का चयन एक चयन बॉक्स के माध्यम से किया जाता है। मैं क्या करना चाहता हूं कि यदि कोई व्यक्ति एक विशेष विकल्प चुनता है, तो उन्हें अधिक जानकारी के लिए संकेत दिया जाता है।जावास्क्रिप्ट - <option>

कुछ ऑनलाइन ट्यूटोरियल की मदद से, मैंने जावास्क्रिप्ट को एक छिपे हुए डिवीजन को ठीक दिखाने के लिए प्रबंधित किया है। मेरी समस्या यह है कि मैं ईवेंट को विकल्प टैग में स्थानांतरित नहीं कर सकता, केवल टैग का चयन करें जो वास्तव में उपयोग नहीं है।

पल कोड की तरह दिखता है पर (स्पष्टता सहायता करने के लिए सरलीकृत कोड!):

<select id="transfer_reason" name="transfer_reason onChange="javascript:showDiv('otherdetail');"> 
<option value="x">Reason 1</option> 
<option value="y">Reason 2</option> 
<option value="other">Other Reason</option> 
</select> 

<div id="otherdetail" style="display: none;">More Detail Here Please</div>

अगर वे चुनें "अन्य कारण" यह तो div प्रदर्शित करता है क्या मैं चाहूँगा है। निश्चित नहीं है कि अगर मैं विकल्प टैग के साथ उपयोग नहीं किया जा सकता है तो मैं इसे कैसे प्राप्त करूं!

किसी भी सहायता की बहुत सराहना :)

नोट: पूरा शुरुआत जब यह जावास्क्रिप्ट की बात आती है, मैं माफी माँगता हूँ अगर यह मूर्खता से हासिल करने के लिए आसान है!

स्रोत

2008-12-15 suitedupgeek

वर्तमान में चयनित इंडेक्स को देखने के लिए चयनित बॉक्स के लिए onchange ईवेंट हैंडलर सेट अप करें। यदि चयनित सूचकांक 'अन्य कारण' विकल्प का है, तो संदेश प्रदर्शित करें; अन्यथा, विभाजन छुपाएं।

<html> 
<head> 
    <script type="text/javascript"> 
    window.onload = function() { 
     var eSelect = document.getElementById('transfer_reason'); 
     var optOtherReason = document.getElementById('otherdetail'); 
     eSelect.onchange = function() { 
      if(eSelect.selectedIndex === 2) { 
       optOtherReason.style.display = 'block'; 
      } else { 
       optOtherReason.style.display = 'none'; 
      } 
     } 
    } 
    </script> 
</head> 
<body> 
    <select id="transfer_reason" name="transfer_reason"> 
     <option value="x">Reason 1</option> 
     <option value="y">Reason 2</option> 
     <option value="other">Other Reason</option> 
    </select> 
    <div id="otherdetail" style="display: none;">More Detail Here Please</div> 
</body> 
</html>

व्यक्तिगत रूप से, मैं इसे एक कदम आगे ले और एक बाहरी फ़ाइल में जावास्क्रिप्ट को स्थानांतरित करने और बस पृष्ठ के हेडर में शामिल चाहते हैं; हालांकि, सभी उद्देश्यों और उद्देश्यों के लिए, यह आपके प्रश्न का उत्तर देने में मदद करनी चाहिए।

स्रोत

2008-12-15 12:34:32 Tom

टॉम की महान प्रतिक्रिया पढ़ने के बाद, मुझे एहसास हुआ कि अगर मैंने कभी भी अपने फॉर्म में अन्य विकल्प जोड़े तो यह टूट जाएगा। मेरे उदाहरण में यह काफी संभावना है, क्योंकि विकल्पों को एक PHP व्यवस्थापक पैनल का उपयोग करके जोड़ा/हटाया जा सकता है।

मैं एक छोटे से पढ़ने किया था और यह कभी तो थोड़ा ताकि बल्कि SelectedIndex का उपयोग करने से यह मूल्य बजाय का उपयोग करता है बदल दिया।

<script type="text/javascript"> 
window.onload = function() { 
    var eSelect = document.getElementById('transfer_reason'); 
    var optOtherReason = document.getElementById('otherdetail'); 
    eSelect.onchange = function() { 
     if(eSelect.value === "Other") { 
      optOtherReason.style.display = 'block'; 
     } else { 
      optOtherReason.style.display = 'none'; 
     } 
    } 
    } 
    </script>

आशा है कि यह भविष्य में किसी और की मदद करेगी!

स्रोत

2008-12-15 13:00:48 suitedupgeek

टॉम का जवाब सुरुचिपूर्ण है, और अच्छी तरह से जेएस को HTML मार्कअप से दूर रखता है। जैसा कि बताया गया है, इसे बाहरी फाइल में भी ले जाया जा सकता है। हालांकि यह कोड में बहुत अधिक "बकवास" जोड़ता है, जैसे कई अनाम फ़ंक्शन असाइनमेंट इत्यादि।

यदि आप त्वरित समाधान चाहते हैं, तो आप इसे चुनिंदा टैग के अंदर भी बदल सकते हैं()। जिसे आप अधिक फिट देखते हैं उसे चुनें।

<select id="transfer_reason" name="transfer_reason" onchange="document.getElementById('otherdetail').style.display = (this.selectedIndex === 2) ? 'block' : 'none';"> 
    <option value="x">Reason 1</option> 
    <option value="y">Reason 2</option> 
    <option value="other">Other Reason</option> 
</select> 
<div id="otherdetail" style="display: none;">More Detail Here Please</div>

स्रोत

2008-12-15 13:03:20 Tuminoid

व्यक्तिगत रूप से मैं शैली की संपत्ति के बजाय कक्षा स्थापित करना पसंद करता हूं; संभवतः div के पूर्वजों के भी पूर्व (जो ड्रॉपडाउन और div दोनों के लिए एक आम कंटेनर हो सकता है; जो आपको एक ही कोड को एक से अधिक बार उपयोग करने की अनुमति देता है) – bart

मैंने अभी एक्सचेंज तय किया है, एचटीएमएल को प्रश्न से कॉपी किया गया था। – Tuminoid

स्टाइल प्रॉपर्टी मुझे स्पष्ट रूप से सीएसएस फ़ाइल की प्रतिलिपि बनाने के लिए, जैसा ऊपर वर्णित है, स्पष्टता के लिए। – suitedupgeek

जावास्क्रिप्ट - <option>

उत्तर

संबंधित मुद्दे