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





تسجيل الدخول (13)


إخفاء عنصر <option> ليس في المواصفات. ولكن يمكنك disable ، والتي يجب أن تعمل عبر المتصفح.

$('option.hide').prop('disabled', true);

http://www.w3.org/TR/html401/interact/forms.html#h-17.6

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

$('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؟ أريد أن أريهم مرة أخرى لاحقًا ، لذا لن يكون ذلك فعالًا جدًا.




مجرد تعديل كود 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/




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

  • يعمل في جميع المتصفحات
  • يحافظ على الاختيار الحالي عند التصفية
  • يحافظ على ترتيب العناصر عند الإزالة / الاستعادة
  • لا يوجد خارقة قذرة / 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/




يمكنك محاولة التفاف عناصر الخيار داخل مدى بحيث لا تكون مرئية ولكن لا يزال يتم تحميلها في DOM. مثل أدناه

jQ('#ddlDropdown option').wrap('<span>');

وقم بإلغاء تحديد الخيار الذي يحتوي على السمة "المحددة" على النحو التالي لعرض الخيار المحدد بالفعل.

var selectedOption = jQ('#ddlDropdown').find("[selected]");
jQ(selectedOption).unwrap();

هذا يعمل عبر جميع المتصفحات.




كان هناك صدع في نفسي وهذا ما توصلت إليه:

(function($){

    $.fn.extend({detachOptions: function(o) {
        var s = this;
        return s.each(function(){
            var d = s.data('selectOptions') || [];
            s.find(o).each(function() {
                d.push($(this).detach());
            });
            s.data('selectOptions', d);
        });
    }, attachOptions: function(o) {
        var s = this;
        return s.each(function(){
            var d = s.data('selectOptions') || [];
            for (var i in d) {
                if (d[i].is(o)) {
                    s.append(d[i]);
                    console.log(d[i]);
                    // TODO: remove option from data array
                }
            }
        });
    }});   

})(jQuery);

// example
$('select').detachOptions('.removeme');
$('.b').attachOptions('[value=1]');');

يمكنك الاطلاع على المثال في http://www.jsfiddle.net/g5YKh/

تتم إزالة عناصر option بالكامل من s select ويمكن إعادة إضافتها مرة أخرى بواسطة jQuery selector.

ربما تحتاج إلى القليل من العمل والاختبار قبل أن تعمل بشكل جيد بما فيه الكفاية لجميع الحالات ، لكنها جيدة بما يكفي لما أحتاج إليه.




جرب هذا:

$(".hide").css("display","none");

لكنني أعتقد أنه من غير المنطقي إخفاء ذلك. إذا كنت تريد إزالته ، فقط:

$(".hide").remove();



للأسف ، لا يمكنك إخفاء عناصر option في جميع المتصفحات.

في الماضي عندما كنت أحتاج إلى القيام بذلك ، قمت بإعداد سمة disabled ، مثل ذلك ...

$('option').prop('disabled', true);

لقد استخدمت بعد ذلك الإخفاء حيث يتم دعمه في المتصفحات باستخدام هذا الجزء من CSS ...

select option[disabled] {
    display: none;
}



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

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

http://jsfiddle.net/CZcvM/




هذا هو نسخة محسنة من @ 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>




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

لقد أنشأت للتو خيارًا ثانيًا (تم إخفاؤه باستخدام 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'))



من الممكن إذا احتفظت بالشيء وفلّفته بطريقة قصيرة.

<select id="driver_id">
<option val="1" class="team_opion option_21">demo</option>
<option val="2" class="team_opion option_21">xyz</option>
<option val="3" class="team_opion option_31">ab</option>
</select>

-

team_id= 31;

var element = $("#driver_id");
originalElement = element.clone();  // keep original element, make it global


element.find('option').remove();   
originalElement.find(".option_"+team_id).each(function() { // change find with your needs
        element.append($(this)["0"].outerHTML); // append found options
});

https://jsfiddle.net/2djv7zgv/4/




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

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

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



أفضل regex من أي وقت مضى مما يؤكد مع RFC5322

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])+







javascript jquery cross-browser