Как скрыть опции JavaScript с помощью JavaScript? (Кросс-браузер)

Ответ 1

К сожалению, вы не можете скрыть элементы option во всех браузерах.

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

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

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

select option[disabled] {
    display: none;
}

Ответ 2

Как уже было сказано, вы не можете display:none индивидуальные <option> s, потому что они не являются подходящими типами элементов DOM.

Вы можете установить .prop('disabled', true), но это только выделяет элементы и делает их невыбираемыми - они все еще занимают место.

Одно из решений, которое я использую, - это .detach() the <select> в глобальную переменную при загрузке страницы, а затем добавляет обратно только <option> по запросу. Что-то вроде этого (http://jsfiddle.net/mblase75/Afe2E/):

var $sel = $('#sel option').detach(); // global variable

$('a').on('click', function (e) {
    e.preventDefault();
    var c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});

Сначала я подумал, что вам придется .clone() <option> перед их добавлением, но, видимо, нет. Исходный глобальный $sel не изменяется после выполнения кода click.

Если у вас есть отвращение к глобальным переменным, вы можете сохранить объект jQuery, содержащий параметры, как переменную .data() в самом элементе <select> (http://jsfiddle.net/mblase75/nh5eW/):

$('#sel').data('options', $('#sel option').detach()); // data variable

$('a').on('click', function (e) {
    e.preventDefault();
    var $sel = $('#sel').data('options'), // jQuery object
        c = 'name-of-class-to-show';
    $('#sel').empty().append( $sel.filter('.'+c) );
});

Ответ 3

У меня была трещина, и вот что я придумал:

(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 полностью удаляются из select и снова могут быть добавлены с помощью селектора jQuery.

Вероятно, требуется немного работы и тестирования, прежде чем он будет работать достаточно хорошо для всех случаев, но он достаточно хорош для того, что мне нужно.

Ответ 4

Скрытие элемента <option> отсутствует в спецификации. Но вы можете disable их, что должно работать кросс-браузер.

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

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

Ответ 5

Я знаю, что это немного поздно, но лучше поздно, чем никогда! Здесь действительно простой способ добиться этого. Просто имейте функцию show и hide. Функция hide просто добавит каждый элемент опции к предопределенному (скрытому) тегу span (который должен работать для всех браузеров), а затем функция show просто переместит этот элемент элемента в ваш тег select.;)

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

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

Ответ 6

Вы можете попробовать обернуть элементы опций внутри диапазона, чтобы они не были видимыми, но все еще загружались в DOM. Как ниже

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

И разверните опцию, которая содержит атрибут 'selected' следующим образом, чтобы отобразить уже выбранную опцию.

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

Это работает во всех браузерах.

Ответ 7

Три года спустя, но мой Гуглинг привел меня сюда, поэтому, надеюсь, мой ответ будет полезен для кого-то другого.

Я только что создал второй вариант (который я спрятал с помощью CSS) и использовал Javascript для перемещения назад и вперед между ними.

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

Ответ 8

Здесь есть опция, которая:

• Работает во всех браузерах
• Сохраняет текущий выбор при фильтрации
• Сохраняет порядок элементов при удалении/восстановлении
• Нет грязных хаков/недействительных 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/

Ответ 9

Возможно, если вы держите объект и фильтруете его коротким способом.

<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/

Ответ 10

Поскольку вы упомянули, что хотите повторно добавить параметры позже, я бы предложил вам загрузить массив или объект с содержимым поля выбора при загрузке страницы - таким образом, у вас всегда есть "главный список" оригинал выберите, если вам нужно его восстановить.

Я сделал простой пример, который удаляет первый элемент в элементе выбора, а затем кнопку восстановления возвращает окно выбора в исходное состояние:

http://jsfiddle.net/CZcvM/

Ответ 11

Это расширенная версия ответа @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>

Ответ 12

На чистом JS:

select = document.getElementById("select_id")                   
to_hide = select[select.selectedIndex];
to_hide.setAttribute('hidden', 'hidden');

просто показать

to_hide.removeAttr('hidden');

или же

to_hide.hidden = false;

Ответ 13

Попробуйте следующее:

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

Но я думаю, что нет смысла скрывать это. если вы хотите удалить его, просто:

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

Ответ 14

просто измените код 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/

Ответ 15

Я думал, что был ярким; -)

В CSS:

option:disabled {display:none;}

В Firefox и Chrome был создан выбор только с включенными параметрами. Ницца.

В IE были показаны включенные опции, отключенные, где только пустые строки, в исходном местоположении. Bad.

В Edge включены параметры, показанные сверху, а затем пустые строки для отключенных опций. Допустимо.