JQuery Hide Option не работает в IE и Safari

Я пытаюсь скрыть несколько вариантов в раскрывающемся списке, используя .hide(). Это отлично работает в firefox и chrome, но это не работает в IE и Safari. Мой оригинальный код более сложный, но я сузил его до этого.

Я пробовал несколько комбинаций, и ничего не сработало.

.hide() работает, но не для вещей в тегах опций по какой-либо причине.

Может кто-нибудь мне помочь? Это сводит меня с ума. Большое вам спасибо за помощь!

Вот мой jscript:

    <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $(".wrapper1").hide();
        });
    </script>

Здесь HTML:

                <label for="prodName">Product Name:</label> 
                <input type="text" name="prodName" /><br />

                <label for="candy">Candy:</label> 
                <select name="candy" id="candy">
                        <option value="0" class="blank" selected="selected"></option><!-- PHP and JS validators should not allow "0" here. User should be prompted to select something. -->
                        <option value="1" class="wrapper1">Hide this 1</option>
                        <option value="2" class="wrapper1">Hide this 2</option>
                        <option value="3" class="wrapper2">Show this 1</option>     
                </select><br />

Ответы

Ответ 1

Это будет работать. измените .show на .showOption и .hideOption. Однако это все еще отстой в IE, потому что в firefox вы можете скрыть выбранную опцию. Поэтому, если "Выбрать один" отображается и скрыт. Firefox все равно скажет "выбрать один".

$.fn.showOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).replaceWith(opt);
            $(span).remove();
        }
        opt.disabled = false;
        $(opt).show();
    }
});
return this;
}
$.fn.hideOption = function() {
this.each(function() {
    if( this.tagName == "OPTION" ) {
        var opt = this;
        if( $(this).parent().get(0).tagName == "SPAN" ) {
            var span = $(this).parent().get(0);
            $(span).hide();
        } else {
            $(opt).wrap("span").hide();
        }
        opt.disabled = true;
    }
});
return this;
}

Ответ 2

Ты прав. Некоторые браузеры просто не позволят вам скрыть элементы option. Вероятно, вам нужно будет удалить их.

Хотя возможно, лучше (или, по крайней мере, альтернативная) возможность отключить их.

$(".wrapper1").prop('disbled', true);

Ответ 3

Вам нужно удалить элементы option. Скрытие их с помощью display:none не поддерживается во многих браузерах.

ЗАКРЫТЬ

var elems = $(".wrapper1").remove();

показать

$('#candy').append(elems);

Ответ 4

Я попробовал решение, которое использует <span> вокруг параметров, но обнаружил, что оно не работает для меня во всех браузерах.

Я создал плагин jQuery, который очень хорошо решает эту проблему. С его помощью вы сделаете следующее:

$('#selection1').hideOption('1');
$('#selection1').showOption('1');

Вы можете скрыть и показать их столько, сколько хотите, и они сохранят свой первоначальный порядок и любые значения .data('x'), которые вы назначили option. Он работает во всех браузерах. Вы можете видеть, что в этом примере: jsFiddle - переключение раскрывающихся списков

Вы можете получить Включить подключаемый модуль. Если вам не нравятся плагины, просто скопируйте код JavaScript из него в свой собственный файл JavaScript проекта. Дополнительную информацию см. В Read the Docs в подключаемом модуле!

Ответ 5

Я нашел одно обходное решение для этого: просто оберните с помощью JQuery wrap()) для опции, которую вы хотите скрыть, она будет автоматически скрыта и развернется с помощью развернуть(), чтобы отобразить ее снова.

Ответ 6

Я пробовал по-разному, но это решение кажется разумным, и я использовал его в своем коде. Никаких плагинов не требуется простая функция регистрации с объектом jquery

Решение:

(function ($) {


$('#showOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', true);
});

$('#hideOne').click(function () {
    $('#ddlNumbers').showHideDropdownOptions('3', false);
});

 $.fn.showHideDropdownOptions = function(value, canShowOption) { 

         $(this).find('option[value="' + value + '"]').map(function () {
            return $(this).parent('span').length === 0 ? this : null;
        }).wrap('<span>').hide();

        if (canShowOption) 
            $(this).find('option[value="' + value + '"]').unwrap().show();
        else 
            $(this).find('option[value="' + value + '"]').hide();

}



})(jQuery);

Вот полная реализация http://jsfiddle.net/8uxD7/3/