সিএসএস সহ <সিলেক্ট> মেনুতে <বিসর্জন> কীভাবে আড়াল করবেন?

Question

আমি উপলব্ধি করেছি যে ক্রোম, মনে, আমাকে লুকাতে মঞ্জুরি দেয় না <option>একটি <select>। ফায়ারফক্স করবে।

আমাকে <option>অনুসন্ধানের মানদণ্ডের সাথে মেলে এমনগুলি লুকিয়ে রাখতে হবে । Chrome ওয়েব সরঞ্জামগুলিতে আমি দেখতে পাচ্ছি যে সেগুলি সঠিকভাবে display: none;আমার জাভাস্ক্রিপ্ট দ্বারা সেট করা হয়েছে, তবে একবার <select>মেনু ক্লিক করলে সেগুলি প্রদর্শিত হয়।

<option>মেনুটি ক্লিক করা অবস্থায় আমি কীভাবে এইগুলিকে আমার সন্ধানের মানদণ্ডের সাথে মেলে না তা দেখাতে পারি? ধন্যবাদ!

Comments

লুকিয়ে লুকিয়ে অনুসন্ধান করার পরিবর্তে। অনুসন্ধানের উপর নির্ভর করে নির্বাচিতটিকে চেষ্টা করুন এবং জনপ্রিয় করুন

— হেনেসনারফেল

আমি হেনেসনারফেলের সাথে একমত আপনি যদি ইতিমধ্যে কোনও অনুসন্ধান বা কোনও ধরণের কোয়েরি করে থাকেন তবে আপনার পছন্দমতো কেবল পপুলেট করা উচিত।

— মাইকেল স্ট্র্যামেল

এটি আমার জন্য ক্রোম 16.0.912.77 মি তে কাজ করে। আমি কি সমস্যার ভুল বুঝছি?

— এমজিবিসনব্রব

@mgibsonbr এটি ক্রস ব্রাউজারে কাজ করে না।

— জ্যাস্পার

@ হেনেসনারফেল বিকল্পগুলি আড়াল করার জন্য ভাল কারণ থাকতে পারে। উদাহরণস্বরূপ, আমার কাছে একটি নির্বাচিত তালিকা বাক্স এবং আইটেমকে নিষ্ক্রিয় হিসাবে চিহ্নিত হিসাবে লুকানোর বা দেখানোর লিঙ্কগুলির সাথে একটি পৃষ্ঠা ছিল। একাধিক তালিকা রাখা বা সার্ভারকে নতুন তালিকার জন্য কোয়েরি করার কোনও কারণ নেই যখনই ব্যবহারকারী সেই বিকল্পটি পরিবর্তন করে।

— রায়ান পি

Answer 1

লুকানোর জন্য আপনাকে দুটি পদ্ধতি প্রয়োগ করতে হবে। display: noneএফএফের জন্য কাজ করে তবে ক্রোম বা আইই নয়। সুতরাং দ্বিতীয় পদ্ধতিটি <option>একটি <span>সাথে মোড়ানো হয় 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 দ্বারা প্রস্তাবিত অতিরিক্ত চেক যুক্ত করা হয়েছে

Comments

এই ক্রেজি পদ্ধতিটি হ'ল একমাত্র যা আসলে সম্পূর্ণ ক্রস ব্রাউজারে কাজ করেছিল এবং এটি কোনও ছদ্মবেশী লুকানো নির্বাচন বাক্স হ্যাক তৈরি করার সাথে জড়িত ছিল না।

— জেসি অ্যাটকিনসন

এই বিষয়ে সতর্কতা অবলম্বন করুন। দেখে মনে হচ্ছে এটি প্রথমে দুর্দান্ত কাজ করেছে তবে কোথাও লাইন ধরে এটি থামে। এখানে একটি ছোট ডেমো রয়েছে: jsfiddle.net/Yb6sk/9

— বিল ক্রিসওয়েল

যদিও এই সমাধানটি উপাদানটি আড়াল করে না, <select>(jQuery এর ব্যবহার করে .val()) এর মান পড়ার যে কোনও প্রয়াস ফিরে আসবে null। আমি কেবল ক্রোম ২৯ এ এটি পরীক্ষা করেছি, তাই গুগলরা সাবধান!

— চিহ্নিত করুন

আকর্ষণীয় হ্যাক, তবে আমি যদি সম্ভব হয় তবে "প্রযুক্তিগতভাবে অবৈধ এইচটিএমএল" এড়ানোর পরামর্শ দেব।

— লুক

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

— লুক

Answer 2

এইচটিএমএল 5 এর জন্য, আপনি 'লুকানো' বৈশিষ্ট্যটি ব্যবহার করতে পারেন।

<option hidden>Hidden option</option>

এটি আই.আই. ১১. দ্বারা সমর্থিত নয় তবে আপনার যদি কেবল কয়েকটি উপাদানগুলি লুকানোর প্রয়োজন হয় তবে সম্ভবত উপাদানগুলি যুক্ত / অপসারণ বা শব্দার্থগতভাবে সঠিক নির্মাণগুলি না করার তুলনায় অক্ষমের সাথে সংযুক্তিতে লুকানো বৈশিষ্ট্যটি নির্ধারণ করা ভাল।

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

রেফারেন্স ।

Comments

আইই 11 এটি সমর্থন করে।

— ইভান পেরেজ

এটি আধুনিক উত্তর। আদর্শভাবে আমরা এটিতেও এটি সেট করছি disabledযাতে যে সমস্ত ব্রাউজারগুলি এইচটিএমএল 5 গ্লোবাল hiddenবৈশিষ্ট্য সমর্থন করে না তাদের ব্যবহারকারীর জন্য কিছু ভিজ্যুয়াল ইঙ্গিত থাকতে পারে।

— ক্লাউডওয়ার্কস

সিএসএসের সাহায্যে আপনি এই কৌশলটি কীভাবে ব্যবহার করবেন?

— গেটফ্রি

সাফারি, এজ, বা আইই তে কাজ করে না। সাফারির জন্য বাগটি 10 বছর বয়সী, দয়া করে বিদ্যমান প্যাচগুলি আপডেট করে সহায়তা করুন। এজ ইস্যু ট্র্যাকারে বাগ খুঁজে পাওয়া যায় না।

— ই

এটির জন্য একটি কার্যপ্রণালী ব্যবহার করছে <option hidden disabled>, সুতরাং এটি সমস্ত ভাল ব্রাউজারে লুকিয়ে রাখে এবং অন্যকে এটিকে অক্ষম করে।

— রামন বালথাজার

Answer 3

আমি আপনাকে পরামর্শ দিচ্ছি যে আপনি কোনও মোড়ক ব্যবহার করে এমন সমাধানগুলি ব্যবহার করবেন না<span> কারণ এটি বৈধ এইচটিএমএল নয়, যা রাস্তায় সমস্যার কারণ হতে পারে। আমি মনে করি পছন্দসই সমাধানটি হ'ল আপনি যে কোনও অপশন লুকাতে চান এবং এটি প্রয়োজনীয় হিসাবে পুনরুদ্ধার করুন remove 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

নির্ভরযোগ্য এবং হ্যাক নয়। দুর্দান্ত উত্তর!

— জেরেমি কুক

@ ড্যানবিউলিইউ পূর্ববর্তী জেসফিডেলে ভুল নামে একটি ফাংশন ছিল। আমি উপরের লিঙ্কটি স্থির করে আপডেট করেছি। এটি ধরার জন্য ধন্যবাদ

— লুক

হ্যাঁ, এটি আমার পছন্দও ছিল। আমি কোডটি প্রথমে কিছুটা ছোট করে গল্ফ পরিচালনা করেছিলাম, প্রথমে ডেটা মানটি একটি ভেরিয়েবলের মধ্যে নিয়ে, যদি অপরিবর্তিত থাকে তবে এটি বিকল্পগুলি সংরক্ষণ করবে, অন্যথায় এটি বিকল্পগুলি পুনরুদ্ধার করবে। আমার প্রয়োজন যেমন জন্য সুনির্দিষ্ট ছিল।

— দিয়নেওয়ালা

var value=$select.val(); $select.html(ogHTML); $select.val(value);পুনঃস্থাপনের পরেও আমাকে নির্বাচিত মান নির্বাচন করতে যুক্ত করতে হয়েছিল।

— দিওয়ানওয়ালা

অপসারণ ও অপসারণের জন্য বিকল্পগুলি নির্বাচন করার চক্রটি কেবল একবার সময় কাজ করেছিল। এর পরে, বিকল্পগুলি.রিমোভ () আমার জন্য কোনও প্রভাব ফেলেনি। একবার আমি পুনরুদ্ধারকারী অপশনগুলি () গুলি) সরিয়ে নিয়ে কয়েকটি লাইন কল করলাম যাতে আমি সর্বদা একটি পূর্ণ, তাজা সিলেক্ট বস্তুর সাথে কাজ করি, এটি কাজ করে।

— নিউক্লিক

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বিকল্পটিতে সেট করা (এবং সম্ভবত একটি ধূসর রঙ হতে পারে, যেহেতু কেবলমাত্র এটি স্বয়ংক্রিয়ভাবে তা করে), এবং এটি বিকল্পটি সঙ্কোচনীয় করে তুলবে।

বিকল্পভাবে, যদি আপনি পারেন তবে পুরোপুরি 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

যেহেতু আপনি ইতিমধ্যে জেএস ব্যবহার করছেন, আপনি পৃষ্ঠায় একটি গোপন নির্বাচন উপাদান তৈরি করতে পারেন এবং প্রতিটি আইটেমের জন্য আপনি সেই তালিকায় লুকানোর চেষ্টা করছেন, এটি গোপন তালিকায় স্থানান্তরিত করুন। এইভাবে, তারা সহজেই পুনরুদ্ধার করা যায়।

খাঁটি সিএসএসে এটি করার কোনও উপায় আমি জানি না ... আমি ভাবতাম যে প্রদর্শনটি: কোনও কৌশলই কাজ করবে না।

Answer 10

!!! সতর্কতা !!!

"WHI" দ্বারা দ্বিতীয় "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 স্পেস দিয়ে ইন্ডেন্ট করে বা আপনার কোডটি `দিয়ে মোড়ানো দ্বারা`

— কলা

এই কোড মহান! এটি সর্বশেষ ক্রোম, ফায়ারফক্স এবং আইই ১১ এ কাজ করে, এটি আমার পক্ষে যথেষ্ট ভাল :)

— সিজভ

আমার শেষ মন্তব্যের আগে, এই জিনিসটি আইই 7 তেও কাজ করে! তাই এফএফ ৩.৫, আমি শেষ পর্যন্ত এটাই নিয়ে এসেছি, এটি কোনওভাবে আইই এবং ক্রোমের উপর অপশনগুলি লুকিয়ে থাকার আগে নির্বাচন করা মানটি সংরক্ষণ করে এবং অপশন ফিরিয়ে আনার পরে যদি অন্য কোনও মান সেট না করা হয় তবে বিকল্পটি সেট করবে আগের মতো নির্বাচিত!

— সিজভ

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

});

নির্বাচন -১ এর মার্কআপ:

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

নির্বাচন -২ এর মার্কআপ:

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