2008-09-26 18 views
5

मेरे पास एक रूप में एक चुनिंदा तत्व है, और मैं केवल तभी दिखाना चाहता हूं जब ड्रॉपडाउन दिखाई न दे। जिन चीजों को मैंने आजमाया है:यह पता लगाने के लिए जावास्क्रिप्ट कि किसी चयनित तत्व का ड्रॉपडाउन

  • क्लिक ईवेंट के लिए देखना, जहां विषम क्लिक का अर्थ है ड्रॉपडाउन दृश्यमान है और यहां तक ​​कि क्लिक का मतलब ड्रॉपडाउन नहीं है। अन्य तरीकों से चूक जाता है कि ड्रॉपडाउन गायब हो सकता है (भागने को दबाकर, दूसरी विंडो में टैब्बिंग), और मुझे लगता है कि सही क्रॉस-ब्राउज़र प्राप्त करना मुश्किल हो सकता है।
  • ईवेंट बदलें, लेकिन इन्हें केवल तभी ट्रिगर किया जाता है जब चयन बॉक्स का मान बदलता है।

विचार?

उत्तर

0

मेरा पहला सवाल यह है कि आप ऐसा करने की कोशिश क्यों कर रहे हैं? मैं इस व्यवहार को प्रदर्शित करने वाले किसी भी एप्लिकेशन के बारे में नहीं सोच सकता और मैं इस स्थिति के होने के लिए एक अच्छा कारण नहीं सोच सकता।

मैं नहीं कह रहा हूं कि आपके पास कोई अच्छा कारण नहीं है, लेकिन मुझे नहीं पता कि यह क्या हो सकता है :)।

+0

जब मैं इसे पढ़ा, मेरा अनुमान है IE के टूटे चयन तत्वों से जुड़ी कोई भी किया गया था। तब मैं उदास हो गया। – Shog9

0

मुझे नहीं लगता कि प्रत्यक्ष समर्थन है। आप चयन के आधार पर भी बैठ सकते हैं - जब चयन फोकस खो देता है तो इसे बुलाया जाता है।

इस पर निर्भर करता है कि यह कितना महत्वपूर्ण है, आप अपने नियंत्रण को लागू करने या ड्रॉप-डाउन मेनू नियंत्रण की तरह एक से शुरू करने का प्रयास कर सकते हैं जो समान है। आमतौर पर, जब तक कि यह आपके आवेदन के लिए महत्वपूर्ण नहीं है, यह करने के लायक नहीं है। आप इस मार्ग से जाने के लिए निर्णय लेते हैं, यहाँ किसी को एक आधार के रूप में डोजो का उपयोग कर यह करने के लिए कोशिश कर रहा है के बारे में चर्चा है:

http://dojotoolkit.org/forum/dijit-dijit-0-9/dijit-support/emulating-html-select

0

राज्य के लिए JavaScript varialbe का उपयोग कर का ट्रैक रखें। हम इसे "ओपनएक्स" कहते हैं।

onFocus = "OpenX = सच" onBlur = "OpenX = false" onchange = "OpenX = false" अगर कुछ दिखाई दे रहा है

0

jQuery में, परीक्षण करने के लिए:

$('something').css('display') 

यह वापस आ जाएगी कुछ जैसे 'ब्लॉक', 'इनलाइन', या 'none' (यदि तत्व प्रदर्शित नहीं होता है)। यह केवल सीएसएस 'प्रदर्शन' विशेषता का प्रतिनिधित्व है।

+0

आप इसे '$ element.is (': visible ')' – alex

0

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<head> 
<title></title> 
<script language="javascript" type="text/javascript"> 

var STECHZ = { 
    init : function() { 
     STECHZ.setDisplayedInterval(); 
    }, 
    setDisplayedInterval : function() { 
     STECHZ.isDisplayedInterval = window.setInterval(function(){ 
      if (document.getElementById("mySelectMenu").style.display == "none") { 
       document.getElementById("myObjectToShow").style.display = "block"; 
      } else { 
       document.getElementById("myObjectToShow").style.display = "none"; 
      } 
     }, 1000); 
    }, 
    isDisplayedInterval : null, 
    toggleDisplay : function() { 
     var mySelectMenu = document.getElementById("mySelectMenu"); 
     if (mySelectMenu.style.display == "none") { 
      mySelectMenu.style.display = "block"; 
     } else { 
      mySelectMenu.style.display = "none"; 
     } 
    } 
}; 

window.onload = function(){ 

    STECHZ.init(); 

} 

</script> 
</head> 
<body> 
    <p> 
     <a href="#" onclick="STECHZ.toggleDisplay();return false;">Click to toggle display.</a> 
    </p> 
    <select id="mySelectMenu"> 
     <option>Option 1</option> 
     <option>Option 2</option> 
     <option>Option 3</option> 
    </select> 
    <div id="myObjectToShow" style="display: none;">Only show when mySelectMenu is not showing.</div> 
</body> 
</html> 
2

सशर्त-सामग्री है, जो कि तुम क्या बारे में पूछ रहे है, कि मुश्किल नहीं है। निम्न उदाहरण में, मैं jQuery का उपयोग अपने लक्ष्य को पूरा करने के लिए:

<select id="theSelectId"> 
    <option value="dogs">Dogs</option> 
    <option value="birds">Birds</option> 
    <option value="cats">Cats</option> 
    <option value="horses">Horses</option> 
</select> 

<div id="myDiv" style="width:300px;height:100px;background:#cc0000"></div> 

हम एक जोड़े की घटनाओं टाई जाएगा दिखाने/छिपाने #myDiv #theSelectId

की
$("#theSelectId").change(function(){ 
    if ($(this).val() != "dogs") 
    $("#myDiv").fadeOut(); 
    else 
    $("#myDiv").fadeIn(); 
}); 
4
चयनित मूल्य पर आधारित

यहां है कि मैं इसे कैसे करना पसंद करूंगा। फोकस और धुंध वह जगह है जहां यह है।

<html> 
    <head> 
     <title>SandBox</title> 
    </head> 
    <body> 
     <select id="ddlBox"> 
      <option>Option 1</option> 
      <option>Option 2</option> 
      <option>Option 3</option> 
     </select> 
     <div id="divMsg">some text or whatever goes here.</div> 
    </body> 
</html> 
<script type="text/javascript"> 
    window.onload = function() { 
     var ddlBox = document.getElementById("ddlBox"); 
     var divMsg = document.getElementById("divMsg"); 
     if (ddlBox && divMsg) { 
      ddlBox.onfocus = function() { 
       divMsg.style.display = "none"; 
      } 
      ddlBox.onblur = function() { 
       divMsg.style.display = ""; 
      } 
      divMsg.style.display = ""; 
     } 
    } 
</script> 
+0

'के साथ अधिक संक्षिप्त बना सकते हैं यह माउस उपयोगकर्ता और कीबोर्ड दोनों उपयोगकर्ताओं के लिए सही ढंग से काम करेगा। – PetersenDidIt

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