JQuery ব্যবহার করে একটি নির্বাচিত তালিকায় বিকল্পগুলি লুকান

100

কী / মান সংযোজন বিকল্পগুলির সাথে আমার একটি অবজেক্ট রয়েছে যা আমি একটি নির্বাচনী তালিকা থেকে আড়াল / মুছে ফেলতে চাই। নিম্নলিখিত বিকল্পগুলির কোনওটিই কাজ করে না। আমি কী মিস করছি?

$.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();
});
jquery  html-select 
— হিটফ্যাক্টরি
সূত্র
12
আপনি কি নিশ্চিত যে গৃহীত উত্তরটি এক্স-ব্রাউজারে কাজ করে;) আমি গুগলের মাধ্যমে এই প্রশ্নোত্তর খুঁজে পেতে এবং অন্যায় ছাপ নিয়ে দূরে চলে যেতে অন্য কাউকে ঘৃণা করব!
— redsquare
@ রেডস্কোয়ার - ঠিক সেই কারণেই আমি ক্রস ব্রাউজার না হয়ে একটি বিকল্পে বিকল্প উপাদানগুলি লুকিয়ে রাখার বিষয়ে অন্য প্রশ্নের লিঙ্ক পোস্ট করেছি :)
— রাশ ক্যাম
— লিয়াম
আমি দেখতে পেয়েছি যে ক্রোমে
— 576.0

উত্তর:

130

এটি মূল্যবান কিসের জন্য, দ্বিতীয় ফর্মটি (এর সাথে @) jQuery 1.3 তে বিদ্যমান নেই। প্রথমটি কাজ করছে না কারণ আপনি দৃশ্যত ভেরিয়েবল ইন্টারপোলেশন আশা করছেন। এটা চেষ্টা কর:

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

নোট করুন যে titleএতে jQuery নির্বাচনকারী মেটাচার্যাক্টর রয়েছে তবে সম্ভবত বিভিন্ন ঘৃণ্য উপায়ে বিভক্ত হবে।

— বিশৃঙ্খলা
সূত্র
51
লুকানো অপশন হল না ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ।
— এমপেন
4
একক উদ্ধৃতি
— রাখলে
11
— Tr1stan
এই ধারণাটি আমাকে আরও একটি সমাধানের জন্য সহায়তা করেছিল। ধন্যবাদ
— অজয় কুমার
<অপশন /> লুকিয়ে রাখার সময় ক্লান্ত হয়ে পড়লে এটি প্রায়শই নির্বাচিত মান আপডেট করে না। এটি লুকানোর পরে আপনাকে একটি নতুন বিকল্প নির্বাচন করতে হবে। আপনি যদি অপ্টগ্রুপে কাজ করছেন তবে ডিওএমকে অনুসরণ করে কৃপণ হয়ে উঠছে।
— সলভিটিগ
80

আপনি এই এক্স ব্রাউজারটি করতে পারবেন না। যদি আমি স্মরণ করি মানে সমস্যা আছে। সবচেয়ে সহজ কাজটি হ'ল আপনি আইটেমগুলি সরিয়ে নেওয়ার আগে নির্বাচনের একটি ক্লোন অনুলিপি রাখুন, এটি আপনাকে সহজেই সরিয়ে ফেলতে এবং তারপরে নিখোঁজ আইটেমগুলিকে যুক্ত করতে দেয়।

— লাল চত্বর
সূত্র
4
বিকল্পগুলি ফিরে পাওয়া কোনও সমস্যা হবে না কারণ এটি প্রতিবার পরিবর্তনের সময় বিকল্পগুলি আপডেট করার জন্য সার্ভারের কাছে এজাক্স কল সহ নির্ভরশীল ড্রপডাউন অংশ। তবে আইই-তে কাজ না করার বিষয়টি কি গোপন ()?
— হিটফ্যাক্টরি
নিশ্চয় তাদের আড়াল করবে না।
— আই
পেস্টবিনের লিঙ্ক উদাহরণটি ক্রোমে বিকল্পটি লুকাবে না
— স্লোলাইফ
5
ক্রস ব্রাউজারে কাজ করে এমন একটি উত্তর এখানে দেওয়া আছে - একটি উদাহরণ সহ - আমি আই 6-৯, ক্রোম এবং এফএফে পরীক্ষা করেছি
— Tr1stan
আইই, এফএফ, ক্রোম এবং সাফারিতে কাজ করে দয়া করে নীচে আমার উত্তরটি দেখুন। এটি সর্বাধিক নমনীয় বিকল্প (প্রদর্শিত পাঠ্য থেকে বিভিন্ন মানের অনুমতি দেয়)।
— সাবেলফোস্টে
54

আমি একটি ভাল উপায় খুঁজে পেয়েছি, এবং এটি খুব সহজ:

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

আবার দেখাতে, কেবল সেই বিকল্পটি খুঁজে নিন (স্প্যান নয়) এবং $("option_you_want_to_show").unwrap()।

এটি ক্রোম এবং ফায়ারফক্সে পরীক্ষা করা হয়েছিল ।

— উইলিয়াম হেরি
সূত্র
4
আপনি পরম প্রতিভা! মাত্র এক সারি ক্রস ব্রাউজার ম্যাজিক।
— মানুডিয়া
শীতল। ক্রস ব্রাউজার সমস্যাটি বেশ ভালভাবে পরিচালনা করে।
— সুব্রত পট্টনায়েক
4
আমি এটিকে উন্নত করেছিলাম তবে সঠিকভাবে বাস্তবায়ন না করা হলে তা বিশৃঙ্খলাবদ্ধ: উদাহরণস্বরূপ আপনি ব্যবহার করতে পারবেন না $("select").val("0").trigger("change")। সহজ সমাধান এই
— clod986
4
মোড়ক / মোড়ক ব্যবহার করে আপনি খুব বেশি নিয়ন্ত্রণ হারিয়ে ফেলেন। ইতিমধ্যে মোড়ানো হয়নি এমন উপাদানগুলি দুর্ঘটনাক্রমে মোড়ক করা সহজ, অতএব তাদের পিতামণ্ডল উপাদানগুলি এড়িয়ে চলে। এছাড়াও এটি সিএসএস নির্বাচকদের গোলযোগ করতে পারে। শো / লুকোচুরি ব্যবহার করা আরও ভাল তবে আপনার যে কোনও নির্বাচিত উপাদানটি নির্বাচন না করার পাশাপাশি এখনও মনে রাখতে হবে: $ ('নির্বাচক-জন্য-ড্রপডাউন') val ভাল ('');
— ওমারজেবাড়ি
4
আমি মোড়ক / উপনাপ সমাধানটি পছন্দ করেছি। কেবলমাত্র এটি নিশ্চিত করা দরকার যে আমরা ইতিমধ্যে মোড়ানো এমন দু'টি মোড়কে না। মোড়কযুক্তদের সাথে একই ধারণা।
— আনোন
47

এখানে আমার স্পিন, দেশীয় ডিওএম পদ্ধতির কারণে সম্ভবত কিছুটা দ্রুত

$.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();
      }
    });
});
— ক্যাপ্রিকা সিক্স
সূত্র
14

এটি ফায়ারফক্স 3.0 এ কাজ করে তবে এমএসআইই 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" রয়েছে)। যদি আমরা এটি বাদ দিই, বিকল্পটি অক্ষম করা আছে, তবে তবুও এটি নীচে নেওয়ার আগে "সক্ষম" বিকল্পটি প্রদর্শন করে। অতএব, আমরা এড়াতে অন্য বিকল্পের দিকে ফোকাস দিই।

— উত্সাহী 123
সূত্র
13

এটি ক্রস ব্রাউজার করা যেতে পারে; এটি কিছু কাস্টম প্রোগ্রামিং লাগে। Http://jsfiddle.net/sablefoste/YVMzt/6/ এ আমার ফিডলটি দেখুন । এটি ক্রোম, ফায়ারফক্স, ইন্টারনেট এক্সপ্লোরার এবং সাফারিতে কাজ করার জন্য পরীক্ষা করা হয়েছিল।

সংক্ষেপে, আমার একটি গোপন ক্ষেত্র রয়েছে, #optionstoreযা ক্রমান্বয়ে অ্যারে সঞ্চয় করে (যেহেতু আপনার জাভাস্ক্রিপ্টে সহযোগী অ্যারে থাকতে পারে না)। তারপরে আপনি যখন বিভাগটি পরিবর্তন করবেন তখন এটি বিদ্যমান বিকল্পগুলি (কেবলমাত্র প্রথমবারের মাধ্যমে) পার্স করে তাদের এগুলি লিখে #optionstore, সমস্ত কিছু মুছে ফেলে এবং কেবল বিভাগের সাথে সম্পর্কিতগুলিকেই ফিরিয়ে দেয়।

দ্রষ্টব্য: আমি এটি ব্যবহারকারীর কাছে প্রদর্শিত পাঠ্য থেকে বিভিন্ন বিকল্পের মানকে অনুমতি দেওয়ার জন্য তৈরি করেছি, তাই এটি অত্যন্ত নমনীয়।

এইচটিএমএল:

<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;
    }
}
— সাবলফস্টে
সূত্র
আপনি দয়া করে রেজাল্টগুড ভেরিয়েবলের ব্যবহারটি ব্যাখ্যা করতে পারেন? আমরা এর ব্যবহারটি সরিয়ে ফেলেছি কারণ যখন ব্যবহারকারীর ফিল্টারড তালিকা থাকে এবং ব্যবহারকারী কোনও অক্ষরে প্রবেশ করে যার অর্থ প্রদর্শন করার মতো কোনও আইটেম নেই, একটি খালি তালিকা আসলে প্রদর্শিত হয় না - কোডটি আইটেমগুলির তালিকা অবিরত করে যা অনুসন্ধান শব্দটির সাথে মিলে যায় অতিরিক্ত চরিত্র। আমাদের ব্যবহারের ক্ষেত্রে উদাহরণ থেকে কিছুটা পৃথক - আমরা একটি অনুসন্ধান শব্দটির এন্ট্রি গ্রহণ করতে একটি ইনপুট ক্ষেত্র ব্যবহার করি।
— B5A7
resultgoodকেবল দেখুন যদি কোনো একটি চেক হয় optionlistingযোগ করা হয়েছিল। যদি এটি হয় তবে এর তালিকাটি <option>ফিরে আসবে। যদি তা না হয় তবে কিছুই ফেরত দেওয়া হয় না, যা আপনি চান যা যদি আপনি দুর্ঘটনাক্রমে এমন কোনও শ্রেণি অন্তর্ভুক্ত করেন যা আসলে সেখানে ছিল না (উদাহরণস্বরূপ, বলুন, সাব-ফুড 6)। একটি ড্রপ ডাউন মধ্যে একটি ফাঁকা ফিরে, ফাংশন শুরুতে ডিক্লেয়ারেশন লাইন পরিবর্তন var optionlisting="<option value=''></option>";।
— সাবেলফোস্ট
যাইহোক, আমি যদি আজ এটি লিখতে চাই, আমি সম্ভবত তথ্য বাহক হিসাবে ক্লাসটি ব্যবহার করতাম না, বরং dataবৈশিষ্ট্যটি ব্যবহার করতাম ; এটি আরও শব্দার্থকভাবে সঠিক।
— সাবেলফোস্ট
হ্যাঁ. আমরাও তাই করেছি।
— বি
5

আপনার সেরা বাজিটি হ'ল আপনি অক্ষম করতে চান এমন বিকল্প আইটেমগুলিতে অক্ষম = সত্য সেট করা, তারপরে সিএসএস সেটে 

option:disabled {
    display: none;
}

এমনকি যদি এই ভাবে ব্রাউজার অক্ষম আইটেমটি গোপন সমর্থন করে না, এটি এখনও নির্বাচিত করা যাবে না .. কিন্তু ব্রাউজার যে কি এটা সমর্থন, তারা আড়াল করা হবে।

— শ্রুতিমধুর
সূত্র
4

এই প্রশ্ন এবং উত্তরগুলি একবার দেখুন -

নির্বাচন করা বিকল্পগুলি অক্ষম করুন ...

আপনার কোডটি দেখে আপনার গুণকের মানটি উদ্ধৃত করা প্রয়োজন

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

থেকে jQuery এর অ্যাট্রিবিউট নির্বাচকরা

উদ্ধৃতিগুলি বেশিরভাগ ক্ষেত্রে areচ্ছিক, তবে যখন মানটিতে "]" এর মতো অক্ষর থাকে তখন বিরোধগুলি এড়ানোর জন্য ব্যবহার করা উচিত

সম্পাদনা:

ঠিক বুঝতে পেরেছি যে আপনি ফাংশন প্যারামিটার থেকে শিরোনাম পাচ্ছেন, সেই ক্ষেত্রে বাক্য গঠনটি হওয়া উচিত 

$("#edit-field-service-sub-cat-value option[value='" + title + "']").hide();
— রাশ ক্যাম
সূত্র
4

রেডস্কয়ারের পরামর্শের প্রসঙ্গে, আমি এটি করে শেষ করেছি:

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

এবং তারপরে এটি বিপরীতে:

$("#edit-field-service-sub-cat-value").append(selectItems);
— ম্যাডটুরকি
সূত্র
3

সমস্যাটি হ'ল ইন্টারনেট এক্সপ্লোরার নির্বাচনের বিকল্পগুলির জন্য লুকানো এবং শো পদ্ধতিগুলি সমর্থন করে বলে মনে হয় না। আমি আমার ddlReasonCode সিলেক্টের সমস্ত অপশন লুকাতে চেয়েছিলাম যা "AttType" বৈশিষ্ট্যের মান হিসাবে বর্তমানে নির্বাচিত টাইপ নেই।

যদিও মনোরম ক্রোমটি এতে সন্তুষ্ট ছিল:

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

এটিই যা প্রয়োজন (বাচ্চারা, এটি ক্রোম :-) এ চেষ্টা করবেন না):

//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/ এ মোড়ানোর ধারণাটি পেয়েছি

— ওরানিত দার
সূত্র
3

পরীক্ষার পরে, উপাদানগুলি আড়াল করতে বিশৃঙ্খলা সহ বিভিন্ন দ্বারা পোস্ট করা সমাধানগুলি এখন ফায়ারফক্স (.0 66.০.৪), ক্রোম (.0৪.০.77৯.১৯৯) এবং এজ (৪২.১.1১4৪.১) এর সর্বশেষতম সংস্করণে কাজ করে do

$("#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");

দ্রষ্টব্য, একটি অক্ষম বিকল্পের জন্য, ড্রপ ডাউনের ভল এখন নাল হবে, নির্বাচিত বিকল্পটি যদি এটি অক্ষম করা হয় তবে তার মান নয়।

— স্টিভেন পুল
সূত্র
2

দেখে মনে হচ্ছে আপনাকে "নির্বাচিত" বৈশিষ্ট্যটিও আপডেট করতে হবে। অন্যথায় বর্তমানে নির্বাচিত বিকল্পটি প্রদর্শন চালিয়ে যেতে পারে - যদিও সম্ভবত আপনি যখন কোনও বিকল্প নির্বাচন করতে যাবেন সম্ভবত এটি চলে যাবে (এটি আমার জন্য কী করেছে): এটি করার চেষ্টা করুন:

$('#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.
— জয়েবেরি
সূত্র
2

আমি অন্য নির্বাচন-তালিকা থেকে নির্বাচিত বিকল্পের উপর ভিত্তি করে একটি নির্বাচন-তালিকা থেকে বিকল্পগুলি আড়াল করার চেষ্টা করছিলাম। এটি ফায়ারফক্স 3-এ কাজ করছিল, তবে ইন্টারনেট এক্সপ্লোরার 6 এ নয় I

জাভাস্ক্রিপ্ট কোড

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

এইচটিএমএল

<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 এ কাজ করার জন্য পরীক্ষা করা হয়েছিল।

— সৌভিক
সূত্র
5
W3C এর মতেid অ্যাট্রিবিউট অনন্য হওয়া উচিত: Id এই বৈশিষ্ট্য নির্ধারণ একটি name = একটি উপাদান রয়েছে। এই নামটি অবশ্যই একটি নথিতে অনন্য হতে হবে।
— জ্যাস্পার
1

সম্ভবত 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 ();
— স্কুয়েলি
সূত্র
1 
$("option_you_want_to_hide").addClass('hidden')

তারপরে, আপনার সিএসএসে নিশ্চিত হয়ে নিন যে আপনার আছে

.hidden{
    display:none;
}
— clod986
সূত্র
1

আমি একটি ফাংশন ব্যবহার করে একটি সমাধান প্রয়োগ করেছি যা <select>কাস্টম ডেটা-বৈশিষ্ট্যের উপর ভিত্তি করে একটি কম্বোবক্স ( ) ফিল্টার করে। এই সমাধানটি সমর্থন করে:

  • <option>ফিল্টারটি নির্বাচনটি খালি ছেড়ে দেয় কখন তা দেখানোর জন্য Having
  • বিদ্যমান নির্বাচিত বৈশিষ্ট্যকে সম্মান করে।
  • <option> ডেটা-ফিল্টার অ্যাট্রিবিউট ব্যতীত উপাদানগুলি ছোঁয়া থাকে are

JQuery 2.1.4 এবং ফায়ারফক্স, ক্রোম, সাফারি এবং আইই 10+ এর সাথে পরীক্ষিত।

এটি উদাহরণ এইচটিএমএল:

<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>

মূল উপাদানগুলি ডেটা () ফাংশন দ্বারা সঞ্চিত থাকে, সুতরাং পরবর্তী কলগুলি সঠিক উপাদান যুক্ত করবে এবং সরিয়ে দেবে।

— আলবার্তো হরমাজাবল
সূত্র
এটি একটি দুর্দান্ত পুনঃব্যবহারযোগ্য সমাধান, যা কেবলমাত্র আমি খুঁজে পেয়েছি যা সাফারিটিতে কাজ করে। ধন্যবাদ!
— এচিলন
0

উত্তরটি উল্লেখ করে যে @এটি নতুন jQuery পুনরুক্তির জন্য অবৈধ। এটি সঠিক হলেও, কিছু পুরানো আইই এখনও বিকল্প উপাদানগুলিকে আড়াল করে না। যে কোনও সংস্করণে আক্রান্ত বিকল্পগুলির উপাদানগুলি আড়াল করার সাথে কারও কারও কারওর সাথে যোগাযোগ করার জন্য, আমি এখানে একটি কার্যনির্বাহ পোস্ট করেছি:

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

মূলত এটি একটি স্প্যান দিয়ে মোড়ানো এবং শোতে প্রতিস্থাপন করুন।

— মধ্যস্থতা omuraliev
সূত্র
0

এই প্রশ্নটি নিয়ে যে কেউই হোঁচট খাচ্ছে তারা চয়েসেনের ব্যবহার বিবেচনা করতে পারে , যা নির্বাচনের ক্ষমতাকে প্রসারিত করে।

— চার্লস উড
সূত্র
0

আমি জানি এই প্রশ্নের উত্তর দেওয়া হয়েছে। তবে আমার চাহিদা ছিল কিছুটা আলাদা। মানের পরিবর্তে আমি পাঠ্য দ্বারা ফিল্টার করতে চেয়েছিলাম। সুতরাং আমি উত্তরটি @ উইলিয়াম হেরিকে এভাবে পরিবর্তন করেছি।

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/>');
— jkjhse
সূত্র
0

আড়াল জন্য বিকল্প মধ্যে নির্বাচন ব্যবহার:

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

কোথায় option_node হয় HTMLOptionElement

PS: আমি JQuery ব্যবহার করি না, তবে অনুমান করে, এটি কার্যকর হবে:

$('.my_select option[value="my_cool_value"]').hidden = true
— DAVIDhaker
সূত্র
আইই নির্বাচনী বিকল্পগুলিতে লুকানোর পক্ষে সমর্থন করে না
— রিচিডি
stackoverflow.com/questions/2031740/… পিএস: আই ব্রাউজার নয়। আইই - ডাউনলোড ব্রাউজারের জন্য প্রোগ্রাম! :)
— DAVIDhaker
0

আমি কেবলমাত্র ডিওএমকে পুরোপুরি সরিয়ে ফেলা ভাল বলে মনে করেছি।

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

ক্রস ব্রাউজার সামঞ্জস্যপূর্ণ। আইই 11 এও কাজ করে

— বিশাল
সূত্র
0 
 $('#id').val($('#id option:eq(0)').hide());

বিকল্প: eq (0) - নির্বাচন বাক্সে সূচক '0' এ লুকানোর বিকল্প।

— কিরণ
সূত্র
-1

; ("# ddtypeoftraining বিকল্প [মান = 5]")। CSS ("প্রদর্শন", "কিছুই নয়"); '(' # ddtypeoftraining ')। সিলেক্ট পিকার (' রিফ্রেশ ');

— হেমন্ত যাদব
সূত্র
আপনার সমাধানে একটি বিবরণ যোগ করুন!
— ফিলিপ এম
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.