दिलचस्प पोस्ट
सेलरी कार्य prefetching को समझना पृष्ठ छोड़ने से पहले सहेजे गए परिवर्तनों के उपयोगकर्ता को चेतावनी दें उपयोगकर्ता के समयक्षेत्र में समय कैसे प्रदर्शित करें कस्टम सत्यापन विशेषता कैसे बनाएं? Entity Framework मॉडल के साथ परियोजना के लिए विभिन्न परियोजनाओं में POCO कक्षाएं उत्पन्न करें C # में स्ट्रिंग को कनवर्ट करें "सशर्त छलांग या चाल अनियमित मूल्य (मूल्यों) पर निर्भर करता है" को इंगित करना "वालग्रिंड संदेश" Xcode 4: आप कंसोल को कैसे देखते हैं? कैसे BNF को EBNF में परिवर्तित करना कैसे vb.net में HTTP पोस्ट के माध्यम से एक फ़ाइल पोस्ट करें कैसे ब्राउज़र बंद का पता लगाने के लिए? मैं jQuery में एक क्लिक और पकड़ के लिए कैसे सुन सकता हूँ? पायथन फाइल में लाइनों को पढ़ने के दौरान पहली पंक्ति को छोड़ें कस्टम लॉक स्क्रीन का विकास करना फ़ंक्शन को सशर्त रूप से लागू करें

सीएसएस के साथ एक <चयन> मेनू में <option> कैसे छिपाएगा?

मुझे एहसास हो गया है कि क्रोम, ऐसा लगता है, मुझे <option> में <select> । फ़ायरफ़ॉक्स

मुझे <option> s को छुपाने की आवश्यकता है जो खोज मापदंड से मेल खाती है। क्रोम वेब टूल में मैं देख सकता हूं कि उन्हें सही ढंग से display: none; करने के लिए सेट किया जा रहा है display: none; मेरे जावास्क्रिप्ट द्वारा, लेकिन एक बार फिर <select> मेनू पर क्लिक किया जाता है वे दिखाए जाते हैं

मैं इन <option> s को कैसे बना सकता हूँ जो मेरे खोज मापदंड से मेल खाता है, जब मेनू पर क्लिक नहीं किया जाता है? धन्यवाद!

Solutions Collecting From Web of "सीएसएस के साथ एक <चयन> मेनू में <option> कैसे छिपाएगा?"

आपको छिपाने के लिए दो तरीकों को लागू करना होगा। display: none एफएफ के लिए काम display: none करता, लेकिन क्रोम या आईई नहीं। तो दूसरी विधि <option> में <span> display: none साथ लपेट रहा है display: none एफएफ ऐसा नहीं करेगा (तांत्रिक रूप से अवैध एचटीएमएल, प्रति युक्ति) लेकिन क्रोम और आईई और यह विकल्प छिपाएगा।

संपादित करें: ओह, हाँ, मैंने पहले ही इसे jQuery में कार्यान्वित किया है:

 jQuery.fn.toggleOption = function( show ) { jQuery( this ).toggle( show ); if( show ) { if( jQuery( this ).parent( 'span.toggleOption' ).length ) jQuery( this ).unwrap( ); } else { if( jQuery( this ).parent( 'span.toggleOption' ).length == 0 ) jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' ); } }; 

2 संपादित करें: यहां बताया गया है कि आप इस फ़ंक्शन का उपयोग कैसे करेंगे:

 jQuery(selector).toggleOption(true); // show option jQuery(selector).toggleOption(false); // hide option 

3 संपादित करें: यूजर 1521986 द्वारा सुझाए गए अतिरिक्त चेक को जोड़ा गया

HTML5 के लिए, आप 'छिपी' विशेषता का उपयोग कर सकते हैं

 <option hidden>Hidden option</option> 

यह आईई <11 द्वारा समर्थित नहीं है । लेकिन अगर आपको कुछ तत्वों को छिपाने की ज़रूरत है, तो संभव है कि आप केवल छिपी हुई विशेषता को निष्क्रिय करने के साथ संयोजन में जोड़ने / तत्वों को जोड़ने / सिरेमिक रूप से सही निर्माण न करें।

 <select> <option>Option1</option> <option>Option2</option> <option hidden>Hidden Option</option> </select> 

मैं सुझाव देता हूं कि आप उन समाधानों का उपयोग नहीं करते जो एक <span> आवरण का उपयोग करते हैं क्योंकि यह मान्य HTML नहीं है, जो सड़क के नीचे समस्याएं पैदा कर सकता है मुझे लगता है कि पसंदीदा समाधान को वास्तव में किसी भी विकल्प को हटाना है जिसे आप छिपाना चाहते हैं, और उन्हें आवश्यकतानुसार पुनर्स्थापित करना चाहते हैं। JQuery के प्रयोग से, आपको केवल इन 3 फ़ंक्शंस की आवश्यकता होगी:

पहला कार्य चयन की मूल सामग्री को बचाएगा सिर्फ सुरक्षित होने के लिए, जब आप पृष्ठ को लोड करते हैं तो आप इस फ़ंक्शन को कॉल करना चाह सकते हैं।

 function setOriginalSelect ($select) { if ($select.data("originalHTML") == undefined) { $select.data("originalHTML", $select.html()); } // If it's already there, don't re-set it } 

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

 function removeOptions ($select, $options) { setOriginalSelect($select); $options.remove(); } 

जब भी आप सभी मूल विकल्पों पर वापस "रीसेट" करना चाहते हैं, तो अंतिम कार्य का उपयोग किया जा सकता है।

 function restoreOptions ($select) { var ogHTML = $select.data("originalHTML"); if (ogHTML != undefined) { $select.html(ogHTML); } } 

ध्यान दें कि ये सभी फ़ंक्शन अपेक्षा करते हैं कि आप jQuery तत्वों में गुजर रहे हैं। उदाहरण के लिए:

 // in your search function... var $s = $('select.someClass'); var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass'); restoreOptions($s); // Make sure you're working with a full deck removeOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed 

यहां काम करने का एक उदाहरण है: http://jsfiddle.net/9CYjy/23/

रयान पी के जवाब को बदलना चाहिए:

  jQuery.fn.toggleOption = function (show) { $(this).toggle(show); if (show) { if ($(this).parent('span.toggleOption').length) $(this).unwrap(); } else { **if ($(this).parent('span.toggleOption').length==0)** $(this).wrap('<span class="toggleOption" style="display: none;" />'); } }; 

अन्यथा यह बहुत सारे टैग में लपेटा जाता है

टॉगलओपशन फ़ंक्शन सही नहीं है और मेरे आवेदन में गंदा बगों को पेश किया गया है। jQuery के साथ भ्रमित हो जाएगा .val () और .arraySerialize () विकल्पों का चयन करने के लिए 4 और 5 का प्रयास करें यह देखने के लिए कि मेरा क्या मतलब है:

 <select id="t"> <option value="v1">options 1</option> <option value="v2">options 2</option> <option value="v3" id="o3">options 3</option> <option value="v4">options 4</option> <option value="v5">options 5</option> </select> <script> jQuery.fn.toggleOption = function( show ) { jQuery( this ).toggle( show ); if( show ) { if( jQuery( this ).parent( 'span.toggleOption' ).length ) jQuery( this ).unwrap( ); } else { jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' ); } }; $("#o3").toggleOption(false); $("#t").change(function(e) { if($(this).val() != this.value) { console.log("Error values not equal", this.value, $(this).val()); } }); </script> 

इस तरह से इनपुट का चयन मुश्किल है इसके बजाय इसे अक्षम करने के बारे में, यह क्रॉस-ब्राउज़र काम करेगा:

 $('select').children(':nth-child(even)').prop('disabled', true); 

यह हर-दूसरे <option> तत्व को अक्षम कर देगा, लेकिन आप जो भी चाहते हैं, उसका चयन कर सकते हैं।

यहां एक डेमो है: http://jsfiddle.net/jYWrH/

नोट: यदि आप किसी तत्व की अक्षम संपत्ति को हटाना चाहते हैं तो आप .removeProp('disabled') उपयोग कर सकते हैं।

अद्यतन करें

आप छुपाए गए तत्वों में <option> तत्वों को छिपाना चाहते हैं।

 $('#visible').on('change', function () { $(this).children().eq(this.selectedIndex).appendTo('#hidden'); }); 

फिर आप <option> तत्वों को मूल चयन तत्व में जोड़ सकते हैं:

 $('#hidden').children().appendTo('#visible'); 

इन दो उदाहरणों में यह उम्मीद की जाती है कि दृश्यमान तत्व का visible और छिपी हुई तत्व का hidden आईडी है

यहां एक डेमो है: http://jsfiddle.net/jYWrH/1/

नोट करें कि .on() jQuery 1.7 में नया है और इस उत्तर के उपयोग में .bind() के समान है: http://api.jquery.com/on

 // Simplest way var originalContent = $('select').html(); $('select').change(function() { $('select').html(originalContent); //Restore Original Content $('select option[myfilter=1]').remove(); // Filter my options }); 

चूंकि आप पहले से ही JS का उपयोग कर रहे हैं, आप पृष्ठ पर एक छिपा हुआ SELECT तत्व बना सकते हैं, और प्रत्येक आइटम के लिए आप उस सूची में छिपाने की कोशिश कर रहे हैं, उसे छिपी सूची में ले जाएं इस तरह, वे आसानी से बहाल किया जा सकता है।

मैं इसे शुद्ध सीएसएस में करने का एक रास्ता नहीं जानता … मैंने सोचा होगा कि डिस्प्ले: कोई भी चाल काम नहीं करेगा।

सरल जवाब: आप नहीं कर सकते प्रपत्र तत्वों में बहुत सीमित स्टाइल क्षमताएं हैं।

सबसे अच्छा विकल्प विकल्प को disabled=true करने के disabled=true (और शायद एक ग्रे रंग, क्योंकि केवल आईई स्वचालित रूप से करता है) सेट करने के लिए होगा, और इससे विकल्प चुनने योग्य नहीं होगा

वैकल्पिक रूप से, यदि आप कर सकते हैं, तो option तत्व पूरी तरह से निकालें।

!!! चेतावनी !!!

"WHILE" द्वारा दूसरे "IF" को बदलें या काम नहीं करता है!

 jQuery.fn.toggleOption = function( show ) { jQuery( this ).toggle( show ); if( show ) { while( jQuery( this ).parent( 'span.toggleOption' ).length ) jQuery( this ).unwrap( ); } else { jQuery( this ).wrap( '<span class="toggleOption" style="display: none;" />' ); } }; 

आपको उन्हें जावास्क्रिप्ट का उपयोग करके <select> से हटा देना चाहिए। यही उन्हें दूर जाने का एकमात्र गारंटी है।

यह एक क्रोम में मेरे लिए काम करने लगता है

 $("#selectid span option").unwrap(); $("#selectid option:not([filterattr=filtervalue])").wrap('<span/>'); 

खेल के लिए देर हो चुकी है, लेकिन इनमें से अधिकतर बहुत जटिल लगते हैं।

यहां बताया कि मैंने इसे कैसे किया है:

 var originalSelect = $('#select-2').html(); // filter select-2 on select-1 change $('#select-1').change(function (e) { var selected = $(this).val(); // reset select ready for filtering $('#select-2').html(originalCourseSelect); if (selected) { // filter $('#select-2 option').not('.t' + selected).remove(); } }); 

चयन -1 के मार्कअप:

 <select id='select-1'> <option value=''>Please select</option> <option value='1'>One</option> <option value='2'>Two</option> </select> 

चयन-2 का मार्कअप:

 <select id='select-2'> <option class='t1'>One</option> <option class='t2'>Two</option> <option>Always visible</option> </select>