jquery كودات كود - كيف يمكنني إخفاء خيارات التحديد باستخدام JavaScript؟ (عبر المتصفح)





7 Answers

كما قيل ، لا يمكنك display:none <option> فردي ، لأنهم ليسوا النوع الصحيح من عناصر DOM.

يمكنك تعيين .prop('disabled', true) ، ولكن هذا فقط يخرج العناصر ويجعلها غير .prop('disabled', true) - فهي لا تزال تستهلك مساحة.

أحد الحلول التي .detach() هو .detach() <select> في متغير عام عند تحميل الصفحة ، ثم أضف فقط <option> الذي تريده عند الطلب. شيء من هذا القبيل ( http://jsfiddle.net/mblase75/Afe2E/ ):

var $sel = $('#sel option').detach(); // global variable

$('a').on('click', function (e) {
    e.preventDefault();
    var c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});

في البداية اعتقدت أنه يجب عليك .clone() <option> s قبل إلحاقها ، ولكن على ما يبدو لا. لا يتم تغيير $sel العالمية الأصلية بعد تشغيل شفرة click .

إذا كان لديك نفور من المتغيرات العامة ، يمكنك تخزين عنصر jQuery الذي يحتوي على الخيارات .data() على العنصر <select> نفسه ( http://jsfiddle.net/mblase75/nh5eW/ ):

$('#sel').data('options', $('#sel option').detach()); // data variable

$('a').on('click', function (e) {
    e.preventDefault();
    var $sel = $('#sel').data('options'), // jQuery object
        c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});
جافا جاهز مشاريع

يجب أن يعمل هذا:

$('option').hide(); // hide options

يعمل في Firefox ، ولكن ليس Chrome (وربما ليس في IE ، ولم يتم اختباره).

مثال أكثر إثارة للاهتمام:

<select>
    <option class="hide">Hide me</option>
    <option>visible option</option>
</select>
<script type="text/javascript">
// try to hide the first option
$('option.hide').hide();

// to select the first visible option
$('option:visible').first().attr('selected', 'selected');
</script>

أو راجع المثال في http://jsfiddle.net/TGxUf/

هو الخيار الوحيد لفصل عناصر الخيار من DOM؟ أريد أن أريهم مرة أخرى لاحقًا ، لذا لن يكون ذلك فعالًا جدًا.




وأنا أعلم أن هذا هو في وقت متأخر قليلا ولكن في وقت متأخر أفضل من أبدا! إليك طريقة بسيطة حقًا لتحقيق ذلك. ببساطة لديك عرض وإخفاء وظيفة. ستقوم الدالة hide بإلحاق كل عنصر من عناصر الخيار بعلامة span (مخفية) محددة مسبقًا (والتي يجب أن تعمل لكل المستعرضات) ، ثم تقوم وظيفة العرض بنقل عنصر الخيار مرة أخرى إلى علامة التحديد الخاصة بك. ؛)

function showOption(value){
    $('#optionHolder option[value="'+value+'"]').appendTo('#selectID');             
}

function hideOption(value){
    $('select option[value="'+value+'"]').appendTo('#optionHolder');
}



تأخرت لمدة ثلاث سنوات ، ولكن أحضر لي غوغلينغ لي هنا ، لذا آمل أن تكون إجابتي مفيدة لشخص آخر.

لقد أنشأت للتو خيارًا ثانيًا (تم إخفاؤه باستخدام CSS) واستخدمت جافا سكريبت لتحريك الملفات إلى الخلف والأمام فيما بينها.

<select multiple id="sel1">
  <option class="set1">Blah</option>
</select>
<select multiple id="sel2" style="display:none">
  <option class="set2">Bleh</option>
</select>

شيء من هذا القبيل ، ثم شيء من هذا القبيل سوف يحرك عنصرًا إلى القائمة (أي جعله مرئيًا). من الواضح أن تكييف الشفرة حسب الحاجة للغرض الخاص بك.

$('#sel2 .set2').appendTo($('#sel1'))



هذا هو الخيار الذي:

  • يعمل في جميع المتصفحات
  • يحافظ على الاختيار الحالي عند التصفية
  • يحافظ على ترتيب العناصر عند الإزالة / الاستعادة
  • لا يوجد خارقة قذرة / HTML غير صالح

`

$('select').each(function(){
    var $select = $(this);
    $select.data('options', $select.find('option'));
});

function filter($select, search) {
    var $prev = null;
    var $options = $select.data('options');
    search = search.trim().toLowerCase();
    $options.each(function(){
        var $option = $(this);
        var optionText = $option.text();
        if(search == "" || optionText.indexOf(search) >= 0) {
            if ($option.parent().length) {
                    $prev = $option;
                return;
            }
            if (!$prev) $select.prepend($option);
            else $prev.after($option);
            $prev = $option;
        }
        else {
              $option.remove();
        }
    });
}

`

JSFiddle: https://jsfiddle.net/derrh5tr/




نظرًا لأنك ذكرت أنك تريد إعادة إضافة الخيارات لاحقًا ، فإنني أقترح عليك تحميل صفيف أو كائن بمحتويات مربع التحديد عند تحميل الصفحة - وبهذه الطريقة يكون لديك دائمًا "قائمة رئيسية" للتحديد الأصلي إذا تحتاج لاستعادته.

لقد قدمت مثالًا بسيطًا يزيل العنصر الأول في التحديد ، ثم يضع زر الاستعادة مربع التحديد مرة أخرى إلى حالته الأصلية:

http://jsfiddle.net/CZcvM/




مجرد تعديل كود dave1010 ل حاجتي

 (function($){
    $.fn.extend({hideOptions: function() {
        var s = this;
        return s.each(function(i,e) {
            var d = $.data(e, 'disabledOptions') || [];
            $(e).find("option[disabled=\"disabled\"]").each(function() {
                d.push($(this).detach());
            });
            $.data(e, 'disabledOptions', d);
        });
    }, showOptions: function() {
        var s = this;
        return s.each(function(i,e) {       
            var d = $.data(e, 'disabledOptions') || [];
            for (var i in d) {
                $(e).append(d[i]);
            }
        });
    }});    
})(jQuery);

http://jsfiddle.net/AbzL3/1/




هذا هو نسخة محسنة من @ NeverEndingLearner في الإجابة:

  • دعم المتصفحات الكاملة لعدم استخدام CSS غير مدعوم
  • مواقف الاحتياطي
  • لا مغلفات متعددة

$("#hide").click(function(){
  $("select>option.hide").wrap('<span>'); //no multiple wrappings
});

$("#show").click(function(){
  $("select span option").unwrap(); //unwrap only wrapped
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<select>
    <option class="hide">Hide me</option>
    <option>visible option</option>
</select>
<button id="hide">hide</button>
<button id="show">show</button>




Related