Скрыть опцию выбора в IE, используя jQuery

Question

В настоящее время я использую jQuery, чтобы скрыть / показать опции выбора, используя следующий код.

$("#custcol7 option[value=" + sizeValue + "]").hide();

Это отлично работает в Firefox, но не приносит пользы в других браузерах. Как скрыть опции выбора в Chrome, Opera и IE?

Answer 1

Существует также метод .load:

s_parent.change(function(){
   s_child.load('./fetch_options.php",{'v',s_parent.val()});
}

Сценарий 'fetch_options.php' будет просто печатать теги опций, основываясь на том, какой источник данных вы используете и какие родительские значения передаются.

Answer 2

Вы также можете заменить html в списке выбора.

Html:

<input id="Button1" type="button" value="hide option" />

<select id="foo">
<option >stuff</option>
<option >stuff2</option>
</select>

Jquery:

    $("#Button1").change(function () {
       $('#foo').html('<option >stuff</option>');
    });

Не совсем то, что вы хотите, но, возможно, это поможет. Для небольших выпадающих меню это определенно проще.

Answer 3

, используя решение, предоставленное AuthorProxy, оно отлично работает для IE, но когда я пытаюсь сделать .val () в раскрывающемся списке в Firefox, я получаю некоторые интересные значения, которые не имеют никакого смысла. Я изменил их опцию, чтобы включить определенные функции браузера, скрыть / показать работы для Firefox.

$.fn.toggleOptionVisibility = function (stateVal) {
    var isBool = typeof stateVal === "boolean";
    return this.each(function () {
        var $this = $(this);
        if (navigator.userAgent.indexOf('MSIE') > -1 || navigator.userAgent.indexOf('Trident') > -1) {
            if (isBool) {
                if (stateVal) $this.filter("span > option").unwrap();
                else $this.filter(":not(span > option)").wrap("<span>").parent().hide();
            }
            else {
                $this.filter("span > option").toggleOptionVisibility(true);
                $this.filter(":not(span > option)").toggleOptionVisibility(false);
            }   
        }
        else {              
            if (isBool) {
                $this.show();
            }
            else {
                $this.hide();
            }
        }
    });
};

Answer 4

Вам нужно будет удалить его, а затем снова добавить для Internet Explorer.

Удалить:

$("#custcol7 option[value=" + sizeValue + "]").remove();

Добавить:

$("#custcol7").append( "<option value='sizeValue'>sizeValue</option>" );

Обратите внимание, что вам нужно иметь sizeValue в тексте опции, чтобы что-то увидеть.

Answer 5

В IE 11 (Edge) работает следующий код.

 $("#id option[value='1']").remove();

и до объявления,

$('<option>').val('1').text('myText').appendTo('#id');

Answer 6

meder - вот решение, которое я выбрал для этого, но с небольшим изменением, чтобы не допустить оборачивания опции в промежуток, который уже был в промежутке:

$.fn.hideOption = function() {
    this.each(function() {
        if (!$(this).parent().is('span')) {
            $(this).wrap('<span>').hide();
        }
    });
};
$.fn.showOption = function() {
    this.each(function() {
        var opt = $(this).find('option').show();
        $(this).replaceWith(opt);
    });
};

Answer 7

Вы можете использовать это:

$("#custcol7 option[value=" + sizeValue + "]").css({display:'none'});

Отлично работает во всех браузерах, кроме Safari и Opera. Я ищу другое лучшее решение:)