JQuery का उपयोग करके एक चयन सूची में विकल्प छिपाएं

Question

मेरे पास विकल्पों की कुंजी / मूल्य जोड़े के साथ एक वस्तु है जिसे मैं एक चयन सूची से छिपाना / निकालना चाहता हूं। निम्न में से कोई भी विकल्प चयनकर्ता काम नहीं करता है। मैं क्या खो रहा हूँ?

$.each(results['hide'], function(name, title) {                     
  $("#edit-field-service-sub-cat-value option[value=title]").hide();
  $("#edit-field-service-sub-cat-value option[@value=title]").hide();
}); 

Comments

क्या आप सुनिश्चित हैं कि स्वीकृत उत्तर x- ब्राउज़र काम करता है;) मैं इस q & google के माध्यम से किसी और से भी नफरत करूंगा और गलत प्रभाव छोड़ दूंगा!

— redsquare

@redsquare - यही कारण है कि मैंने एक अन्य प्रश्न के लिंक को चुनिंदा तत्वों के बारे में छिपाया जा रहा है जिसमें ब्राउज़र पार नहीं किया जा रहा है :)

— Russ Cam

चयनित रेडियो पर आधारित jQuery के निष्क्रिय चयन के

— Liam

मैंने पाया कि आपको भी चयनित तत्व को अचयनित करना है यदि यह छिपाने के बाद छिपा हुआ है () क्रोम 57.0 में कहा जाता है

— omarjebari

Answer 1

इसके लायक क्या है, @jQuery 1.3 में दूसरा रूप (के साथ ) मौजूद नहीं है। पहला काम नहीं कर रहा है क्योंकि आप स्पष्ट रूप से परिवर्तनीय प्रक्षेप की उम्मीद कर रहे हैं। इसे इस्तेमाल करे:

$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();

ध्यान दें कि यदि titlejQuery के चयनकर्ता मेटाचैकर शामिल हैं, तो यह संभवतः विभिन्न लुभावने तरीकों से टूट जाएगा ।

Comments

छिपाई जा रही है विकल्प है नहीं पार ब्राउज़र संगत।

— मपेन २

एकल उद्धरणों को

— जोर से डालते हुए

यहां एक उत्तर है जो क्रॉस ब्राउज़र काम करता है - यहां

— Tr1stan

इस अवधारणा ने मुझे एक और समाधान के लिए मदद की। धन्यवाद

— अजय कुमार

थके हुए होने पर <विकल्प /> छुपाने के रूप में अक्सर यह अभ्यस्त चयनित मूल्य को अपडेट करता है। इसके छिपे होने के बाद आपको एक नया विकल्प चुनना होगा। यदि आप ऑप्टग्रुप में काम कर रहे हैं तो DOM को ट्रिक करना मुश्किल हो जाता है।

— सोलविटेग

Answer 2

आप यह एक्स-ब्राउज़र नहीं कर सकते। अगर मुझे याद है कि मुद्दों है। सबसे आसान काम यह है कि आप आइटमों को हटाने से पहले चयन की एक क्लोन कॉपी रखें, इससे आप आसानी से हटा सकते हैं और फिर लापता वस्तुओं को वापस जोड़ सकते हैं।

Comments

विकल्प वापस लेना कोई समस्या नहीं होगी क्योंकि यह परिवर्तन के लिए हर बार विकल्पों को अपडेट करने के लिए सर्वर पर अजाक्स कॉल के साथ एक निर्भर ड्रॉपडाउन का हिस्सा है। लेकिन क्या यह IE में छिपाने () के काम नहीं करने का मामला है?

— हिटफैक्टिव

वास्तव में उन्हें छिपा नहीं होगा। Ie8 के बारे में निश्चित नहीं है, लेकिन निश्चित रूप से एक flavour काम नहीं करता है

— redsquare

पास्टबिन लिंक का उदाहरण क्रोम में विकल्प को नहीं छिपाता है

— slolife

यहाँ एक उत्तर है जो क्रॉस ब्राउज़र काम करता है - यहाँ एक उदाहरण के साथ - मैंने IE6-9, क्रोम और FF में परीक्षण किया है

— Tr1stan

कृपया नीचे मेरा जवाब देखें, IE, FF, Chrome और Safari में काम करना। यह सबसे लचीला विकल्प है (प्रदर्शित पाठ से विभिन्न मूल्यों की अनुमति)।

— सेबलपोस्टे

Answer 3

मुझे एक बेहतर तरीका मिला, और यह बहुत आसान है:

$("option_you_want_to_hide").wrap('<span/>')

फिर से दिखाने के लिए, बस उस विकल्प को खोजें (स्पैन नहीं) और $("option_you_want_to_show").unwrap()।

यह क्रोम और फ़ायरफ़ॉक्स पर परीक्षण किया गया था ।

Comments

आप एक पूर्ण प्रतिभाशाली हैं! बस एक पंक्ति पार ब्राउज़र जादू।

— मैनुडे

ठंडा। क्रॉस ब्राउज़र समस्या को बहुत अच्छी तरह से संभालता है।

— सुब्रत पट्टनिक

मैंने इसे एक अपवोट किया, लेकिन यह ठीक से लागू नहीं होने पर गड़बड़ हो जाती है: उदाहरण के लिए आप इसका उपयोग नहीं कर सकते $("select").val("0").trigger("change")। आसान समाधान यह है

— clod986

आप रैप / अनप्रैप के उपयोग से बहुत अधिक नियंत्रण खो देते हैं। गलती से उन तत्वों को खोलना आसान नहीं है जो पहले से लिपटे हुए नहीं हैं, इसलिए उन्हें उनके मूल तत्व से अलग कर दिया गया है। इसके अलावा यह सीएसएस चयनकर्ताओं को गड़बड़ कर सकता है। शो / छिपाना का उपयोग करना बेहतर है, हालांकि आपको अभी भी किसी भी चयनित तत्व को याद करने की आवश्यकता है: $ ('चयनकर्ता के लिए ड्रॉपडाउन')। वैल ('');

— ओमर्जाबरी

मुझे रैप / uwnrap समाधान पसंद आया। बस यह सुनिश्चित करने की आवश्यकता है कि हम पहले से लिपटे हुए लोगों को डबल लपेटें नहीं। अलिखित लोगों के साथ भी ऐसा ही विचार है।

— आनन

Answer 4

यहाँ मेरा स्पिन है, मूल डोम तरीकों के कारण थोड़ा तेज होने की संभावना है

$.each(results['hide'], function(name, title) {                     
    $(document.getElementById('edit-field-service-sub-cat-value').options).each(function(index, option) {
      if( option.value == title ) {
        option.hidden = true; // not fully compatible. option.style.display = 'none'; would be an alternative or $(option).hide();
      }
    });
});

Answer 5

यह फ़ायरफ़ॉक्स 3.0 में काम करता है, लेकिन MSIE 8 में नहीं, और न ही ओपेरा 9.62 में:

jQuery('#destinations').children('option[value="1"]').hide();
jQuery('#destinations').children('option[value="1"]').css('display','none');

लेकिन एक विकल्प को छिपाने के बजाय, कोई इसे अक्षम कर सकता है:

jQuery('#destinations').val('2'); 
jQuery('#destinations').children('option[value="1"]').attr('disabled','disabled');

ऊपर दी गई दो पंक्तियों में से पहली फ़ायरफ़ॉक्स के लिए है और दूसरा विकल्प पर ध्यान केंद्रित करें (यह मानकर = "2")। यदि हम इसे छोड़ देते हैं, तो विकल्प अक्षम है, लेकिन अभी भी "सक्षम" विकल्प प्रदर्शित करता है इससे पहले कि हम इसे छोड़ दें। इसलिए, हम इससे बचने के लिए दूसरे विकल्प पर ध्यान केंद्रित करते हैं।

Answer 6

यह पार ब्राउज़र किया जा सकता है; यह सिर्फ कुछ कस्टम प्रोग्रामिंग लेता है। कृपया मेरी फीलिंग http://jsfiddle.net/sablefoste/YVMzt/6/ पर देखें । यह क्रोम, फ़ायरफ़ॉक्स, इंटरनेट एक्सप्लोरर और सफारी में काम करने के लिए परीक्षण किया गया था।

संक्षेप में, मेरे पास एक छिपा हुआ क्षेत्र है, #optionstoreजो क्रमिक रूप से सरणी को संग्रहीत करता है (क्योंकि आपके पास जावास्क्रिप्ट में एसोसिएटिव एरे नहीं हो सकता है)। फिर जब आप श्रेणी बदलते हैं, तो यह मौजूदा विकल्पों को पार करता है (पहली बार केवल के माध्यम से) उन्हें लिखता है #optionstore, सब कुछ मिटा देता है, और केवल श्रेणी से जुड़े लोगों को वापस रखता है।

नोट: मैंने इसे उपयोगकर्ता को प्रदर्शित पाठ से विभिन्न विकल्प मानों की अनुमति देने के लिए बनाया है, इसलिए यह अत्यधिक लचीला है।

HTML:

<p id="choosetype">
    <div>
        Food Category:
    </div>
    <select name="category" id="category" title="OPTIONAL - Choose a Category to Limit Food Types" size="1">
        <option value="">All Food</option>
        <option value="Food1">Fruit</option>
        <option value="Food2">Veggies</option>
        <option value="Food3">Meat</option>
        <option value="Food4">Dairy</option>
        <option value="Food5">Bread</option>
    </select>
    <div>
        Food Selection
    </div>
    <select name="foodType" id="foodType" size="1">
        <option value="Fruit1" class="sub-Food1">Apples</option>
        <option value="Fruit2" class="sub-Food1">Pears</option>
        <option value="Fruit3" class="sub-Food1">Bananas</option>
        <option value="Fruit4" class="sub-Food1">Oranges</option>
        <option value="Veg1" class="sub-Food2">Peas</option>
        <option value="Veg2" class="sub-Food2">Carrots</option>
        <option value="Veg3" class="sub-Food2">Broccoli</option>
        <option value="Veg4" class="sub-Food2">Lettuce</option>
        <option value="Meat1" class="sub-Food3">Steak</option>
        <option value="Meat2" class="sub-Food3">Chicken</option>
        <option value="Meat3" class="sub-Food3">Salmon</option>
        <option value="Meat4" class="sub-Food3">Shrimp</option>
        <option value="Meat5" class="sub-Food3">Tuna</option>
        <option value="Meat6" class="sub-Food3">Pork</option>
        <option value="Dairy1" class="sub-Food4">Milk</option>
        <option value="Dairy2" class="sub-Food4">Cheese</option>
        <option value="Dairy3" class="sub-Food4">Ice Cream</option>
        <option value="Dairy4" class="sub-Food4">Yogurt</option>
        <option value="Bread1" class="sub-Food5">White Bread</option>
        <option value="Bread2" class="sub-Food5">Panini</option>
    </select>
    <span id="optionstore" style="display:none;"></span>
</p>

जावास्क्रिप्ट / jQuery:

$(document).ready(function() {
    $('#category').on("change", function() {
        var cattype = $(this).val();
        optionswitch(cattype);
    });
});

function optionswitch(myfilter) {
    //Populate the optionstore if the first time through
    if ($('#optionstore').text() == "") {
        $('option[class^="sub-"]').each(function() {
            var optvalue = $(this).val();
            var optclass = $(this).prop('class');
            var opttext = $(this).text();
            optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
            $('#optionstore').text(optionlist);
        });
    }

    //Delete everything
    $('option[class^="sub-"]').remove();

    // Put the filtered stuff back
    populateoption = rewriteoption(myfilter);
    $('#foodType').html(populateoption);
}

function rewriteoption(myfilter) {
    //Rewrite only the filtered stuff back into the option
    var options = $('#optionstore').text().split('@%');
    var resultgood = false;
    var myfilterclass = "sub-" + myfilter;
    var optionlisting = "";

    myfilterclass = (myfilter != "")?myfilterclass:"all";

    //First variable is always the value, second is always the class, third is always the text
    for (var i = 3; i < options.length; i = i + 3) {
        if (options[i - 1] == myfilterclass || myfilterclass == "all") {
            optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="' + options[i - 1] + '">' + options[i] + '</option>';
            resultgood = true;
        }
    }
    if (resultgood) {
        return optionlisting;
    }
}

Comments

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

— B5A7

यह resultgoodदेखने के लिए कि क्या कोई optionlistingजोड़ा गया है, बस एक चेक है । यदि यह था, तो <option>एस की सूची वापस आ गई है। यदि नहीं, तो कुछ भी नहीं लौटाया जाता है, जो आप चाहते हैं कि अगर आप गलती से एक वर्ग शामिल करें जो वास्तव में वहां नहीं था (उदाहरण के लिए, कहो, सब-फूड 6)। एक ड्रॉप डाउन में एक खाली लौटने के लिए, फ़ंक्शन की शुरुआत में घोषणा रेखा को बदलें var optionlisting="<option value=''></option>";।

— सेबलफॉस्ट

वैसे, अगर मैं आज यह लिखता, तो मैं शायद सूचना वाहक के रूप में कक्षा का उपयोग नहीं करता, बल्कि dataविशेषता; यह शब्दार्थ से अधिक सही है।

— सेबलफॉस्ट

हाँ। हमने वही किया।

— B5A7

Answer 7

आपकी सबसे अच्छी शर्त है कि आप जिस विकल्प आइटम को निष्क्रिय करना चाहते हैं, उस पर सीएसएस सेट में अक्षम = सही सेट करें

option:disabled {
    display: none;
}

भले ही इस तरह ब्राउज़र विकलांग आइटम छुपा समर्थन नहीं करता है, यह अभी भी चयनित नहीं किया जा सकता .. लेकिन ब्राउज़रों कि पर है इसे समर्थन, वे छिपा दिया जाएगा।

Answer 8

इस सवाल और जवाब पर एक नजर -

चुनिंदा विकल्प अक्षम करें ...

अपने कोड को देखते हुए, आपको विशेषता मान को उद्धृत करने की आवश्यकता हो सकती है

$("#edit-field-service-sub-cat-value option[value='title']").hide();

से jQuery विशेषता चयनकर्ताओं

अधिकांश मामलों में उद्धरण वैकल्पिक होते हैं, लेकिन इनका विरोध तब किया जाना चाहिए जब मूल्य में "] जैसे अक्षर हों।

संपादित करें:

बस एहसास हुआ कि आप फ़ंक्शन पैरामीटर से शीर्षक प्राप्त कर रहे हैं, जिस स्थिति में वाक्यविन्यास होना चाहिए

$("#edit-field-service-sub-cat-value option[value='" + title + "']").hide();

Answer 9

Redsquare के सुझाव के संदर्भ में, मैंने यह करना समाप्त कर दिया:

var selectItems = $("#edit-field-service-sub-cat-value option[value=" + title + "]").detach();

और फिर इसे उल्टा करने के लिए:

$("#edit-field-service-sub-cat-value").append(selectItems);

Answer 10

समस्या यह है कि इंटरनेट एक्सप्लोरर कुछ चुनिंदा विकल्पों के लिए छिपाने और दिखाने के तरीकों का समर्थन नहीं करता है। मैं अपने ddlReasonCode चयन के सभी विकल्पों को छिपाना चाहता था, जिसमें वर्तमान में "एटिट्यूड" विशेषता के मूल्य के रूप में चयनित प्रकार नहीं था।

जबकि प्यारा क्रोम इससे काफी संतुष्ट था:

//Hiding all options
            $("#ddlReasonCode").children().hide();
            //Showing only the relevant options
            $("#ddlReasonCode").children("option[atttype=\"" + CurrentType + "\"]").show();

यह वही है जो IE की आवश्यकता है (बच्चे, CHROME :-) पर यह कोशिश न करें):

//Hiding all options
            $("#ddlReasonCode option").each(function (index, val) {
                if ($(this).is('option') && (!$(this).parent().is('span')) && ($(this).atttype != CurrentType))
                    $(this).wrap('<span>').hide();
            });
            //Showing only the relevant options
            $("#ddlReasonCode option").each(function (index, val) {
                if (this.nodeName.toUpperCase() === 'OPTION') {
                    var span = $(this).parent();
                    var opt = this;
                    if ($(this).parent().is('span') && ((this).atttype == CurrentType)) {
                        $(opt).show();
                        $(span).replaceWith(opt);
                    }
                }
            });

मैंने पाया कि http://ajax911.com/hide-options-selecbox-jquery/ पर रैपिंग आइडिया

Answer 11

परीक्षण करने के बाद, तत्वों को छिपाने के लिए अराजकता सहित विभिन्न द्वारा पोस्ट किए गए समाधान, फ़ायरफ़ॉक्स (66.0.4), क्रोम (74.0.3729.169) और एज (42.17134.1.0) के नवीनतम संस्करणों में काम करते हैं।

$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
$("#edit-field-service-sub-cat-value option[value=" + title + "]").show();

IE के लिए, यह काम नहीं करता है, हालांकि आप विकल्प को अक्षम कर सकते हैं

$("#edit-field-service-sub-cat-value option[value=" + title + "]").attr("disabled", "disabled");
$("#edit-field-service-sub-cat-value option[value=" + title + "]").removeAttr("disabled");

और फिर एक अलग मूल्य के चयन के लिए मजबूर करें।

$("#edit-field-service-sub-cat-value").val("0");

ध्यान दें, एक अक्षम विकल्प के लिए, ड्रॉप डाउन की वैल अब शून्य होगी, यदि यह अक्षम है तो चयनित विकल्प का मूल्य नहीं है।

Answer 12

ऐसा लगता है कि आपको "चयनित" विशेषता को भी अपडेट करना होगा। अन्यथा वर्तमान में चयनित विकल्प प्रदर्शित करना जारी रख सकता है - हालाँकि यह संभवतः तब चलेगा जब आप वास्तव में एक विकल्प का चयन करने के लिए जाएंगे (यानी यह मेरे लिए क्या किया है): ऐसा करने का प्रयास करें:

$('#mySelector').children('option').hide();
$('#mySelector').children('option').removeAttr("selected"); //this may be overkill.
$('#mySelector').children('option[value="'+SelVal+'"]').show();  
$('#mySelector').children(':visible').attr('selected','selected'); //assuming that something is still on the list.

Answer 13

मैं एक अन्य चयन सूची से चयनित विकल्प के आधार पर एक चयन सूची से विकल्पों को छिपाने की कोशिश कर रहा था। यह फ़ायरफ़ॉक्स 3 में काम कर रहा था, लेकिन इंटरनेट एक्सप्लोरर 6 में नहीं। मुझे यहां कुछ विचार मिले और अब इसका समाधान है, इसलिए मैं साझा करना चाहूंगा:

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

function change_fruit(seldd) {
    var look_for_id=''; var opt_id='';
    $('#obj_id').html("");
    $("#obj_id").append("<option value='0'>-Select Fruit-</option>");
    if(seldd.value=='0') {
        look_for_id='N';
    }
    if(seldd.value=='1'){
        look_for_id='Y';
        opt_id='a';
    }
    if(seldd.value=='2') {
        look_for_id='Y';
        opt_id='b';
    }
    if(seldd.value=='3') {
        look_for_id='Y';
        opt_id='c';
    }

    if(look_for_id=='Y') {
        $("#obj_id_all option[id='"+opt_id+"']").each(function() {
          $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        });
    }
    else {
        $("#obj_id_all option").each(function() {
          $("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
        });
    }
}

HTML

<select name="obj_id" id="obj_id">
    <option value="0">-Select Fruit-</option>
    <option value="1" id="a">apple1</option>
    <option value="2" id="a">apple2</option>
    <option value="3" id="a">apple3</option>
    <option value="4" id="b">banana1</option>
    <option value="5" id="b">banana2</option>
    <option value="6" id="b">banana3</option>
    <option value="7" id="c">Clove1</option>
    <option value="8" id="c">Clove2</option>
    <option value="9" id="c">Clove3</option>
</select>

<select name="fruit_type" id="srv_type" onchange="change_fruit(this)">
    <option value="0">All</option>
    <option value="1">Starts with A</option>
    <option value="2">Starts with B</option>
    <option value="3">Starts with C</option>
</select>

<select name="obj_id_all" id="obj_id_all" style="display:none;">
    <option value="1" id="a">apple1</option>
    <option value="2" id="a">apple2</option>
    <option value="3" id="a">apple3</option>
    <option value="4" id="b">banana1</option>
    <option value="5" id="b">banana2</option>
    <option value="6" id="b">banana3</option>
    <option value="7" id="c">Clove1</option>
    <option value="8" id="c">Clove2</option>
    <option value="9" id="c">Clove3</option>
</select>

यह फ़ायरफ़ॉक्स 3 और इंटरनेट एक्सप्लोरर 6 में काम करने के रूप में जाँच की गई थी।

Comments

W3C के अनुसारid विशेषता अद्वितीय होनी चाहिए: id = यह विशेषता एक तत्व को एक नाम प्रदान करती है। यह नाम किसी दस्तावेज़ में अद्वितीय होना चाहिए।

— जैस्पर

Answer 14

स्ट्रिंग संघनन से बचने के लिए आप jQuery.grep का उपयोग कर सकते हैं

$($.grep($("#edit-field-service-sub-cat-value option"),
         function(n,i){
           return n.value==title;
         })
 ).hide()

Answer 15

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

var SelectFilter = function ()
        {
            this.allOptions = $("#someSelect option");

            this.fooBarOptions= $("#someSelect option[value='foo']");
            this.fooBarOptions= this.fooBarOptions.add($("#someSelect option[value='bar']"));


            this.showFooBarOptions = function()
            {
                $("#someSelect option").remove();
                $("#someSelect").append(this.fooBarOptions);
            };
            this.showAllOptions = function()
            {
                $("#someSelect option").remove();
                $("#someSelect").append(this.allOptions);
            };



        };

ऑब्जेक्ट का उपयोग करने के लिए ऐसा करें:

var filterObject = new SelectFilter();
filterObject.showFooBarOptions (); 

Answer 16

मैंने <select>कस्टम डेटा- विशेषताओं के आधार पर कॉम्बोबॉक्स ( ) को फ़िल्टर करने वाले फ़ंक्शन का उपयोग करके एक समाधान लागू किया । यह समाधान समर्थन करता है:

• एक <option>दिखाने के लिए जब फिल्टर का चयन खाली छोड़ देंगे।
• मौजूदा चयनित विशेषताओं का सम्मान करता है।
• <option> डेटा फ़िल्टर विशेषता के बिना तत्वों को अछूता छोड़ दिया जाता है।

JQuery 2.1.4 और फ़ायरफ़ॉक्स, क्रोम, सफारी और IE 10+ के साथ परीक्षण किया गया।

यह उदाहरण है HTML:

<select id="myCombobox">
  <option data-filter="1" value="AAA">Option 1</option>
  <option data-filter="1" value="BBB">Option 2</option>
  <option data-filter="2" value="CCC">Option 3</option>
  <option data-filter="2" value="DDD">Option 4</option>
  <option data-filter="3" value="EEE">Option 5</option>
  <option data-filter="3" value="FFF">Option 6</option>
  <option data-filter-emptyvalue disabled>No Options</option>
</select>

फ़िल्टरिंग के लिए jQuery कोड:

function filterCombobox(selectObject, filterValue, autoSelect) {

  var fullData = selectObject.data("filterdata-values");
  var emptyValue = selectObject.data("filterdata-emptyvalue");

  // Initialize if first time.
  if (!fullData) {
    fullData = selectObject.find("option[data-filter]").detach();
    selectObject.data("filterdata-values", fullData);
    emptyValue = selectObject.find("option[data-filter-emptyvalue]").detach();
    selectObject.data("filterdata-emptyvalue", emptyValue);
    selectObject.addClass("filtered");
  }
  else {
    // Remove elements from DOM
    selectObject.find("option[data-filter]").remove();
    selectObject.find("option[data-filter-emptyvalue]").remove();
  }

  // Get filtered elements.
  var toEnable = fullData.filter("option[data-filter][data-filter='" + filterValue + "']");

  // Attach elements to DOM
  selectObject.append(toEnable);

  // If toEnable is empty, show empty option.
  if (toEnable.length == 0) {
    selectObject.append(emptyValue);
  }

  // Select First Occurrence
  if (autoSelect) {
    var obj = selectObject.find("option[selected]");
    selectObject.val(obj.length == 0 ? toEnable.val() : obj.val());
  }
}

इसका उपयोग करने के लिए, आप केवल उस फ़ंक्शन को कॉल करते हैं जिसे आप रखना चाहते हैं।

filterCombobox($("#myCombobox"), 2, true);

फिर परिणामी चयन होगा:

<select id="myCombobox">
  <option data-filter="2" value="CCC">Option 3</option>
  <option data-filter="2" value="DDD">Option 4</option>
</select>

मूल तत्व डेटा () फ़ंक्शन द्वारा संग्रहीत किए जाते हैं, इसलिए बाद के कॉल सही तत्वों को जोड़ेंगे और हटाएंगे।

Comments

यह एक महान पुन: प्रयोज्य समाधान है, जो केवल एक ही मैंने पाया है जो सफारी पर काम करता है। धन्यवाद!

— एफिलॉन

Answer 17

उत्तर बताता है कि @नए jQuery के पुनरावृत्तियों के लिए अमान्य है। जबकि यह सही है, कुछ पुराने IE अभी भी विकल्प तत्वों को छिपाते नहीं हैं। प्रभावित संस्करणों में छिपने वाले विकल्प तत्वों से निपटने के लिए, मैंने यहां एक वर्कअराउंड पोस्ट किया है:

http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/

मूल रूप से बस इसे एक स्पैन के साथ लपेटें और शो पर प्रतिस्थापित करें।

Answer 18

इस प्रश्न पर ठोकर खाने वाला कोई भी चुना का उपयोग करने पर विचार कर सकता है , जो चयन की क्षमताओं का विस्तार करता है।

Answer 19

$("option_you_want_to_hide").addClass('hidden')

फिर, अपने सीएसएस में सुनिश्चित करें कि आपके पास है

.hidden{
    display:none;
}

Answer 20

मुझे पता है कि इस सवाल का जवाब दिया गया है। लेकिन मेरी आवश्यकता थोड़ी अलग थी। मूल्य के बजाय मैं पाठ द्वारा फ़िल्टर करना चाहता था। इसलिए मैंने @William Herry के उत्तर को इस तरह संशोधित किया।

var array = ['Administration', 'Finance', 'HR', 'IT', 'Marketing', 'Materials', 'Reception', 'Support'];
if (somecondition) {
   $(array).each(function () {
       $("div#deprtmnts option:contains(" + this + ")").unwrap();
   });
}
else{
   $(array).each(function () {
       $("div#deprtmnts option:contains(" + this + ")").wrap('<span/>');
   });
}

इस तरह से आप मूल्य का उपयोग करके भी इस तरह से शामिल कर सकते हैं

 $("div#ovrcateg option[value=" + this + "]").wrap('<span/>');

Answer 21

चुनिंदा उपयोग में छिपाने के लिए विकल्प :

option_node.hidden = true; # For hide selcet item
option_node.hidden = false; # For show selcet item

जहां option_node है HTMLOptionElement

पुनश्च: मैं JQuery का उपयोग नहीं करता हूं, लेकिन यह अनुमान लगाता हूं कि यह काम करेगा:

$('.my_select option[value="my_cool_value"]').hidden = true

Comments

IE चुनिंदा विकल्पों पर छिपाने का समर्थन नहीं करता है

— RitchieD

stackoverflow.com/questions/2031740/… PS: IE ब्राउज़र नहीं है। IE - डाउनलोड ब्राउज़र के लिए प्रोग्राम! :)

— दाविदकर

Answer 22

मुझे पूरी तरह से डोम को पूरी तरह से हटाने के लिए सबसे अच्छा लगा।

$(".form-group #selectId option[value='39']").remove();

क्रॉस ब्राउज़र संगत। IE11 पर भी काम करता है

Answer 23

 $('#id').val($('#id option:eq(0)').hide());

विकल्प: eq (0) -हाइड ऑप्शन इंडेक्स '0' में सेलेक्ट बॉक्स में।

Answer 24

आप मान या कक्षा के नाम के साथ दिखा / छिपा सकते हैं । काम करने के उदाहरण के साथ नीचे दिए गए लिंक की जाँच करें।
मूल्य के साथ या वर्ग के नाम के साथ jquery चुने गए विकल्पों को दिखाएं / छिपाएं।

Answer 25

$ ("# ddtypeoftraining विकल्प [मूल्य = 5]")। सीएसएस ("प्रदर्शन", "कोई नहीं"); $ ( 'ताज़ा') ( '# ddtypeoftraining') selectpicker।

Comments

कृपया अपने समाधान में एक विवरण जोड़ें!

— फिलिप एम।