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

Question

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

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

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

Answer 1

Я только что натолкнулся на это и вместо того, чтобы снова и снова клонировать весь выбор, я просто заменил опции, которые должны быть скрыты, элементами span и скрыл промежутки (хотя я думаю, что браузер все равно визуально их не отображал, я думаю) - вам может потребоваться изменить код (если он сложный), чтобы перебирать промежутки для сложной логики.

Пролеты хранят ссылку на option и заменяют ее, когда они должны быть показаны.

Этот код, очевидно, может быть реорганизован и предварительно подтвержден.

http://fiddle.jshell.net/FAkEK/12/show/

РЕДАКТИРОВАТЬ # 2 (ИСПОЛЬЗУЙТЕ ЭТО ВНУТРЕННИЙ): Мне пришло в голову, что вместо того, чтобы делать все это дерьмо клон / ссылка / замена, просто оберните опцию с пролетом, скрыть промежуток и на шоу просто замените интервал с опцией снова.

http://fiddle.jshell.net/FAkEK/25/show/

Answer 2

Я думаю, meder предоставил правильный ответ, и здесь он немного изменен, чтобы отразить то, что работает для меня:

$.fn.optVisible = function( show ) {
    if( show ) {
        this.filter( "span > option" ).unwrap();
    } else {
        this.filter( ":not(span > option)" ).wrap( "<span>" ).parent().hide();
    }
    return this;
}

Протестировано с (долго живу BrowserStack):

• Windows XP: IE 6.0, Firefox 3.0, Safari 4.0, Opera 10.0, Chrome 14.0
• Windows 8: IE 10.0 Metro
• iOS 3.2 (iPad), iOS 6.0 (iPhone 5)
• Android 1.6 (Sony Xperia X10)

jsfiddle

Answer 3

Нет, это не поддерживается в IE (и, вероятно, не поддерживается ни в Chrome, ни в Opera). Вам придется полностью удалить опции и добавить их позже, если вы хотите, чтобы они были действительно невидимыми. Но в большинстве случаев достаточно простого disabled="disabled", и это намного проще, чем обработка удаления и добавления опций.

Answer 4

попробуйте отсоединить (). при необходимости вы можете подключить его позже, используя append () или insertAfter ()

Answer 5

Для удаления параметров используйте:

var opt=$("option").detach();

Для отображения параметров используйте:

opt.appendTo( "select" );

Answer 6

Просто удалите его и сохраните в переменной в вашем JavaScript. Вы можете просто создать новый объект, когда вам это понадобится позже.

В противном случае попробуйте атрибут disabled, упомянутый выше.

Answer 7

способ, которым вы это сделали, должен работать в chrome, но nvm. Вот другой способ

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

и если вы хотите показать его снова:

select.append('<option value="'+sizeValue+'"></option>');

Он отлично работает в любом браузере и имеет действительно простой код. Проблема в том, что если вы хотите скрыть несколько опций, они более типизированы ... но это можно решить, поместив их в переменные, если они не изменяются динамически, как это:

var options = '<option value="'+sizeValue1+'"></option><option value="'+sizeValue2+'"></option><option value="'+sizeValue3+'"></option>';

select.append(options);

Таким образом, если вам нужно удалить / добавить в нескольких местах, вы набрали параметры только один раз. Надеюсь, я дал еще один интересный вариант. С наилучшими пожеланиями.

Answer 8

/**
* Change visibility of select list option elements
* @param  {boolean}   stateVal      show hidden options if true; hide it otherwise. If not setted then toggle visibility, based on it's current state
*/
$.fn.toggleOptionVisibility = function (stateVal) {
    var isBool = typeof stateVal === "boolean";
    return this.each(function () {
         var $this = $(this);
         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);
        }
    });
};

Answer 9

Вы можете использовать через комбинации var $opt=$('select>option').clone() и $('select option[value="'+val+'"').remove(). Есть еще один пример: попробуйте это. https://jsfiddle.net/sherali/jkw8fxzf/12/

var $secondOption= $('#second-choice>option').clone();

$("#first-choice").change(function() {
    var userSelected = $(this).val();

    $('#second-choice').html($secondOption);
    $('#second-choice option[value="'+userSelected+'"').remove()
});

Answer 10

Мое мнение немного отличается от других ответов.

Цель состоит не в том, чтобы скрыть параметры, а в том, чтобы отключить их (чтобы интерфейс был согласованным).

Мой сценарий:

У меня есть несколько вариантов выбора в форме, и когда пользователь выбирает параметр в одном из вариантов выбора, другие варианты выбора должны отключить этот параметр, и наоборот. Пользователь ограничен в выборе той же опции, которая уже выбрана. Обычно мы отключаем эту опцию, но для IE 7, который ее не поддерживает. Пользователь также получает возможность добавлять новые выборки.

Решение:

под нагрузкой:

Если браузер IE7, то при заполнении выбора и отключении уже выбранных параметров на других выборках я добавляю настраиваемый атрибут для параметра («data-ie7-disabled»), а также меняю цвет отключенных параметров на #cccccc '(это стандартный цвет для отключенных опций). Это делает пользовательский интерфейс одинаковым во всех браузерах.

При изменении:

Я сохраняю предыдущий параметр в локальной переменной (это сохраняется в фокусе).

Когда пользователь пытается изменить опцию

1. Пользователь выбирает совершенно новый параметр, который не выбран ни в одном другом раскрывающемся списке. Затем я перебираю другие варианты выбора, меняю цвет и добавляю пользовательский атрибут к этой выбранной опции для других вариантов выбора.

2. Когда пользователь выбирает параметр, который уже выбран (параметр, выделенный серым цветом). Сначала я проверяю, есть ли у опции этот пользовательский атрибут. Если это так, то> я просто возвращаю вариант к предыдущему с сообщением об ошибке, говорящим: «Этот параметр уже выбран или BLAH BLAH».

3. Когда пользователь изменяет свою существующую опцию на совершенно новую опцию, которая не выбрана в других выпадающих меню. Я снова перебираю все остальные параметры выбора и удаляю цвет, а также пользовательский атрибут.

Надеюсь, это поможет.