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

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

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

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

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

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

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

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

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

Протестировано с помощью (long live 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

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

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

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

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

Чтобы показать параметры, используйте:

opt.appendTo( "select" );

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

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

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

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);

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

/**
* 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 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);
        }
    });
};

Вы можете использовать комбинации 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()
});

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

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

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

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

Решение:

Нагрузка:

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

Вкл. Изменение:

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

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

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

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

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

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

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

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

"fetch_options.php" script будет просто печатать теги параметров на основе любого используемого источника данных и передаваемого родительского значения.

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

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

и вернуться назад,

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

Вы также можете заменить html внутри select.

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>');
    });

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

используя решение, предоставленное 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();
            }
        }
    });
};

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

Чтобы удалить:

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

Чтобы добавить:

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

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

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

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

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