Это должно работать:
$('option').hide(); // hide options
Он работает в Firefox, но не в Chrome (и, вероятно, не в IE, не протестирован).
Более интересный пример:
<select>
<option class="hide">Hide me</option>
<option>visible option</option>
</select>
<script type="text/javascript">
// try to hide the first option
$('option.hide').hide();
// to select the first visible option
$('option:visible').first().attr('selected', 'selected');
</script>
Или см. пример в http://jsfiddle.net/TGxUf/
Является единственной возможностью отсоединить элементы опций из DOM? Мне нужно показать их позже, так что это будет не очень эффективно.
К сожалению, вы не можете скрыть элементы option во всех браузерах.
В прошлом, когда мне нужно было это сделать, я установил их атрибут disabled, например...
$('option').prop('disabled', true);
Затем я использовал скрытие, где он поддерживается в браузерах, используя этот кусок CSS...
select option[disabled] {
display: none;
}
Как уже было сказано, вы не можете 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) );
});
У меня была трещина, и вот что я придумал:
(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.
Вероятно, требуется немного работы и тестирования, прежде чем он будет работать достаточно хорошо для всех случаев, но он достаточно хорош для того, что мне нужно.
Скрытие элемента <option> отсутствует в спецификации. Но вы можете disable их, что должно работать кросс-браузер.
$('option.hide').prop('disabled', true);
Я знаю, что это немного поздно, но лучше поздно, чем никогда! Здесь действительно простой способ добиться этого. Просто имейте функцию show и hide. Функция hide просто добавит каждый элемент опции к предопределенному (скрытому) тегу span (который должен работать для всех браузеров), а затем функция show просто переместит этот элемент элемента в ваш тег select.;)
function showOption(value){
$('#optionHolder option[value="'+value+'"]').appendTo('#selectID');
}
function hideOption(value){
$('select option[value="'+value+'"]').appendTo('#optionHolder');
}
Вы можете попробовать обернуть элементы опций внутри диапазона, чтобы они не были видимыми, но все еще загружались в DOM. Как ниже
jQ('#ddlDropdown option').wrap('<span>');
И разверните опцию, которая содержит атрибут 'selected' следующим образом, чтобы отобразить уже выбранную опцию.
var selectedOption = jQ('#ddlDropdown').find("[selected]");
jQ(selectedOption).unwrap();
Это работает во всех браузерах.
Три года спустя, но мой Гуглинг привел меня сюда, поэтому, надеюсь, мой ответ будет полезен для кого-то другого.
Я только что создал второй вариант (который я спрятал с помощью 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'))
Здесь есть опция, которая:
`
$('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/
Возможно, если вы держите объект и фильтруете его коротким способом.
<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
});
Поскольку вы упомянули, что хотите повторно добавить параметры позже, я бы предложил вам загрузить массив или объект с содержимым поля выбора при загрузке страницы - таким образом, у вас всегда есть "главный список" оригинал выберите, если вам нужно его восстановить.
Я сделал простой пример, который удаляет первый элемент в элементе выбора, а затем кнопку восстановления возвращает окно выбора в исходное состояние:
Это расширенная версия ответа @NeverEndingLearner:
$("#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>На чистом JS:
select = document.getElementById("select_id")
to_hide = select[select.selectedIndex];
to_hide.setAttribute('hidden', 'hidden');
просто показать
to_hide.removeAttr('hidden');
или же
to_hide.hidden = false;
Попробуйте следующее:
$(".hide").css("display","none");
Но я думаю, что нет смысла скрывать это. если вы хотите удалить его, просто:
$(".hide").remove();
просто измените код 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);
Я думал, что был ярким; -)
В CSS:
option:disabled {display:none;}
В Firefox и Chrome был создан выбор только с включенными параметрами. Ницца.
В IE были показаны включенные опции, отключенные, где только пустые строки, в исходном местоположении. Bad.
В Edge включены параметры, показанные сверху, а затем пустые строки для отключенных опций. Допустимо.