CSS के साथ <select> मेनू में <विकल्प> कैसे छिपाएं?

Question

मैंने महसूस किया है कि क्रोम, ऐसा लगता है, मुझे छिपाने के लिए अनुमति नहीं दी जाएगी <option>एक में <select>। फ़ायरफ़ॉक्स करेगा।

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

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

Comments

एक खोज पर छिपाने और दिखाने के बजाय। कोशिश करें और खोज के आधार पर चयन को पॉप्युलेट करें

— हेनसननरेल

मैं हेनसेनरफेल से सहमत हूं। यदि आप पहले से ही खोज या किसी प्रकार की क्वेरी कर रहे हैं, तो आपको केवल उन लोगों को आबाद करने में सक्षम होना चाहिए जो आप चाहते हैं।

— माइकल स्ट्रैमल

यह क्रोम 16.0.912.77 मीटर में मेरे लिए ठीक काम करता है। क्या मैं समस्या को गलत समझ रहा हूं?

— mgibsonbr

@mgibsonbr यह क्रॉस-ब्राउज़र काम नहीं करता है।

— जैस्पर

@Henesnarfel विकल्प छिपाने के अच्छे कारण हो सकते हैं। उदाहरण के लिए, मेरे पास एक पृष्ठ था जिसके पास एक चयन सूची थी और निष्क्रिय के रूप में चिह्नित वस्तुओं को छिपाने या दिखाने के लिए लिंक। जब भी उपयोगकर्ता उस विकल्प को बदलता है तो कई सूचियों को रखने या किसी नई सूची के लिए सर्वर को क्वेरी करने का कोई कारण नहीं है।

— रयान पी

Answer 1

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

संपादित करें: ओह, हाँ, मैंने पहले ही इसे 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;" />' );
    }
};

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

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

EDIT 3: @ user1521986 द्वारा सुझाया गया अतिरिक्त चेक जोड़ा गया

Comments

यह पागल विधि केवल एक ही है जो वास्तव में पूरी तरह से क्रॉस-ब्राउज़र पर काम करती है और इसमें फॉक्स-छिपे हुए चयन बॉक्स हैक को शामिल करना शामिल नहीं था।

— जेसी एटकिंसन

इससे सावधान रहें। यह पहली बार में बहुत अच्छा काम कर रहा है, लेकिन कहीं-कहीं यह लाइन बंद हो जाती है। यहाँ एक छोटा सा डेमो है: jsfiddle.net/Yb6sk/9

— बिल क्रिस्वेल

यद्यपि यह समाधान तत्व को छिपाता है, लेकिन <select>(jQuery का उपयोग करके .val()) के मान को पढ़ने का कोई भी प्रयास वापस आ जाएगा null। मैंने अभी इसे Chrome 29 में परीक्षण किया है, इसलिए Googler सावधान रहें!

— मार्क

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

— ल्यूक

सच है, सभी ब्राउज़रों के अलग-अलग कार्यान्वयन हैं। लेकिन एक कारण ब्राउज़र मानक चश्मा को कड़ाई से लागू नहीं कर सकता है क्योंकि वहाँ बहुत अधिक जीवित कोड है जो ऐनक का पालन नहीं करता है। IMO: यदि कोई अन्य समाधान नहीं हैं, तो हर तरह से एक हैक का उपयोग करें। लेकिन अगर आप कल्पना का पालन कर सकते हैं और अपनी समस्या का समाधान कर सकते हैं, तो आप क्यों नहीं करेंगे? यह आपके कोड को दूसरों के साथ अच्छा खेलने में मदद करता है और कल्पना को मजबूत करने में मदद करता है।

— ल्यूक

Answer 2

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

<option hidden>Hidden option</option>

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

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

संदर्भ ।

Comments

IE 11 इसका समर्थन करता है।

— Iván Pérez

यह आधुनिक उत्तर है। आदर्श रूप से हम इसे disabledउन ब्राउज़रों के लिए भी सेट कर रहे हैं जो HTML5 वैश्विक hiddenविशेषता का समर्थन नहीं करते हैं , उपयोगकर्ता के लिए कुछ दृश्य संकेत होंगे।

— 19

आप सीएसएस के साथ इस तकनीक का उपयोग कैसे करते हैं?

— GetFree

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

— संकेत

इसके लिए वर्कअराउंड का उपयोग किया जाता है <option hidden disabled>, इसलिए यह सभी अच्छे ब्राउज़रों में छिप जाता है और इसे दूसरों पर निष्क्रिय कर देता है।

— रेमन बालथाजर

Answer 3

मेरा सुझाव है कि आप उन समाधानों का उपयोग न करें जो एक <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/

Comments

विश्वसनीय और हैक नहीं। बहुत बढ़िया जवाब!

— जेरेमी कुक

@DanBeaulieu पिछले jsfiddle में एक फ़ंक्शन गलत नाम से था। मैंने ऊपर दिए लिंक को ठीक किया और अपडेट किया। उस पकड़ने के लिए धन्यवाद।

— ल्यूक

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

— डायनेवाला

var value=$select.val(); $select.html(ogHTML); $select.val(value);पुनर्स्थापना के बाद भी मुझे चयनित मूल्य रखने के लिए जोड़ना था ।

— डायनेवला

उन्हें हटाने और हटाने के लिए विकल्पों का चयन करने का चक्र केवल एक बार काम करता है। उसके बाद, मेरे लिए Options.remove () का कोई प्रभाव नहीं पड़ा। एक बार जब मैंने रिस्टोरेशन ($ s) को कुछ पंक्तियों में स्थानांतरित कर दिया, ताकि मैं हमेशा एक पूर्ण, ताज़ा चयन वस्तु के साथ काम करूं, तो यह काम किया।

— न्यूक्लिक जूल

Answer 4

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

    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;" />');
        }
    };

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

Comments

ध्यान दें कि एचटीएमएल चश्मा (के अनुसार w3.org/TR/html5/forms.html#the-select-element ), एक <select>ही शामिल करना चाहिए <option>या <optgroup>या स्क्रिप्ट से समर्थन तत्वों। इसलिए आपको अमान्य <span>रैपर का उपयोग करने से बचना चाहिए ।

— ल्यूक

Answer 5

टॉगलओक्शन फ़ंक्शन सही नहीं है और मेरे आवेदन में गंदा कीड़े पेश करता है। 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>

Answer 6

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

$('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

Answer 7

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

सबसे अच्छा विकल्प विकल्प disabled=trueपर सेट करना होगा (और शायद एक ग्रे रंग, क्योंकि केवल IE स्वचालित रूप से ऐसा करता है), और यह विकल्प को अस्पष्ट बना देगा।

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

Answer 8

// Simplest way

var originalContent = $('select').html();

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

Answer 9

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

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

Answer 10

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

"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;" />' );
    }
};

Answer 11

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

Comments

JQuery का उपयोग करते हुए, इसे हटाने के साथ किया जा सकता है:$('options').remove();

— ल्यूक

Answer 12

यह मुझे क्रोम में काम करने लगता है

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

Comments

कृपया अपने कोड में कोड प्रारूप जोड़ें, या तो 4 स्थानों के साथ इंडेंट करके या अपने कोड को `के साथ लपेटकर।

— केले

यह कोड बहुत अच्छा है! यह नवीनतम क्रोम, फ़ायरफ़ॉक्स और IE 11 पर काम करता है, यह मेरे लिए काफी अच्छा है :)

— सिजवां

मेरी पिछली टिप्पणी से पहले, यह बात IE 7 पर भी काम करती है! 3.5 एफएफ, यह वही है जो मैं आखिरी में आया था, यह किसी भी तरह IE पर है और क्रोम उस मूल्य को संरक्षित करता है जिसे विकल्पों को छिपाने से पहले चुना गया है और यदि विकल्प वापस लाने के बाद कोई अन्य मूल्य सेट नहीं होता है तो ब्राउज़र विकल्प सेट करेगा पहले की तरह चयनित!

— सिजाव

Answer 13

खेल के लिए देर से, लेकिन इनमें से अधिकांश काफी जटिल लगते हैं।

यहाँ है कि मैं यह कैसे किया:

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>