У меня есть объект с парами ключ/значение параметров, которые я хочу скрыть/удалить из списка выбора. Ни один из следующих селекторов параметров не работает. Что мне не хватает?
$.each(results['hide'], function(name, title) {
$("#edit-field-service-sub-cat-value option[value=title]").hide();
$("#edit-field-service-sub-cat-value option[@value=title]").hide();
});
Для чего это стоит, вторая форма (с @) не существует в jQuery 1.3. Первое не работает, потому что вы, видимо, ожидаете переменную интерполяцию. Попробуйте следующее:
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
Обратите внимание, что это, вероятно, будет разрушаться различными отвратительными способами, если title содержит метасимволы селектора jQuery.
Вы не можете сделать этот x-браузер. Если я помню, то есть проблемы. Самое простое - сохранить клонированную копию выбора перед удалением элементов, это позволяет легко удалить и снова добавить отсутствующие элементы.
Я нашел лучший способ, и это очень просто:
$("option_you_want_to_hide").wrap('<span/>')
Чтобы снова показать, просто найдите эту опцию (не span) и $("option_you_want_to_show").unwrap().
Он был протестирован на Chrome и Firefox.
Вот мой поворот, скорее всего, немного быстрее из-за собственных методов DOM
$.each(results['hide'], function(name, title) {
$(document.getElementById('edit-field-service-sub-cat-value').options).each(function(index, option) {
if( option.value == title ) {
option.hidden = true; // not fully compatible. option.style.display = 'none'; would be an alternative or $(option).hide();
}
});
});
Это работает в Firefox 3.0, но не в MSIE 8, ни в Opera 9.62:
jQuery('#destinations').children('option[value="1"]').hide();
jQuery('#destinations').children('option[value="1"]').css('display','none');
Вместо того, чтобы скрывать опцию, можно просто отключить ее:
jQuery('#destinations').val('2');
jQuery('#destinations').children('option[value="1"]').attr('disabled','disabled');
Первая из двух вышеперечисленных строк - для Firefox и передает фокус на вторую опцию (при условии, что она имеет value = "2" ). Если мы его опустим, опция отключена, но по-прежнему отображается опция "включен", прежде чем мы ее опустим. Следовательно, мы переходим к другому варианту, чтобы избежать этого.
Это может быть кросс-браузер; это просто требует некоторого пользовательского программирования. См. Мою скрипку в http://jsfiddle.net/sablefoste/YVMzt/6/. Он был протестирован для работы в Chrome, Firefox, Internet Explorer и Safari.
Короче говоря, у меня есть скрытое поле, #optionstore, которое хранит массив последовательно (так как вы не можете иметь Ассоциативные массивы в JavaScript). Затем, когда вы меняете категорию, она анализирует существующие параметры (только в первый раз) записывает их в #optionstore, стирает все и возвращает только те, которые связаны с категорией.
ПРИМЕЧАНИЕ. Я создал это, чтобы разрешить различные значения параметров из текста, отображаемого пользователю, поэтому он очень гибкий.
HTML:
<p id="choosetype">
<div>
Food Category:
</div>
<select name="category" id="category" title="OPTIONAL - Choose a Category to Limit Food Types" size="1">
<option value="">All Food</option>
<option value="Food1">Fruit</option>
<option value="Food2">Veggies</option>
<option value="Food3">Meat</option>
<option value="Food4">Dairy</option>
<option value="Food5">Bread</option>
</select>
<div>
Food Selection
</div>
<select name="foodType" id="foodType" size="1">
<option value="Fruit1" class="sub-Food1">Apples</option>
<option value="Fruit2" class="sub-Food1">Pears</option>
<option value="Fruit3" class="sub-Food1">Bananas</option>
<option value="Fruit4" class="sub-Food1">Oranges</option>
<option value="Veg1" class="sub-Food2">Peas</option>
<option value="Veg2" class="sub-Food2">Carrots</option>
<option value="Veg3" class="sub-Food2">Broccoli</option>
<option value="Veg4" class="sub-Food2">Lettuce</option>
<option value="Meat1" class="sub-Food3">Steak</option>
<option value="Meat2" class="sub-Food3">Chicken</option>
<option value="Meat3" class="sub-Food3">Salmon</option>
<option value="Meat4" class="sub-Food3">Shrimp</option>
<option value="Meat5" class="sub-Food3">Tuna</option>
<option value="Meat6" class="sub-Food3">Pork</option>
<option value="Dairy1" class="sub-Food4">Milk</option>
<option value="Dairy2" class="sub-Food4">Cheese</option>
<option value="Dairy3" class="sub-Food4">Ice Cream</option>
<option value="Dairy4" class="sub-Food4">Yogurt</option>
<option value="Bread1" class="sub-Food5">White Bread</option>
<option value="Bread2" class="sub-Food5">Panini</option>
</select>
<span id="optionstore" style="display:none;"></span>
</p>
JavaScript/jQuery:
$(document).ready(function() {
$('#category').on("change", function() {
var cattype = $(this).val();
optionswitch(cattype);
});
});
function optionswitch(myfilter) {
//Populate the optionstore if the first time through
if ($('#optionstore').text() == "") {
$('option[class^="sub-"]').each(function() {
var optvalue = $(this).val();
var optclass = $(this).prop('class');
var opttext = $(this).text();
optionlist = $('#optionstore').text() + "@%" + optvalue + "@%" + optclass + "@%" + opttext;
$('#optionstore').text(optionlist);
});
}
//Delete everything
$('option[class^="sub-"]').remove();
// Put the filtered stuff back
populateoption = rewriteoption(myfilter);
$('#foodType').html(populateoption);
}
function rewriteoption(myfilter) {
//Rewrite only the filtered stuff back into the option
var options = $('#optionstore').text().split('@%');
var resultgood = false;
var myfilterclass = "sub-" + myfilter;
var optionlisting = "";
myfilterclass = (myfilter != "")?myfilterclass:"all";
//First variable is always the value, second is always the class, third is always the text
for (var i = 3; i < options.length; i = i + 3) {
if (options[i - 1] == myfilterclass || myfilterclass == "all") {
optionlisting = optionlisting + '<option value="' + options[i - 2] + '" class="' + options[i - 1] + '">' + options[i] + '</option>';
resultgood = true;
}
}
if (resultgood) {
return optionlisting;
}
}
Взгляните на этот вопрос и ответы -
Посмотрев на свой код, вам может потребоваться указать значение атрибута
$("#edit-field-service-sub-cat-value option[value='title']").hide();
В большинстве случаев котировки являются необязательными, но следует использовать, чтобы избежать конфликтов, когда значение содержит символы типа "]"
EDIT:
Просто понял, что вы получаете заголовок из параметра функции, и в этом случае синтаксис должен быть
$("#edit-field-service-sub-cat-value option[value='" + title + "']").hide();
В связи с предложением redsquare, я закончил это:
var selectItems = $("#edit-field-service-sub-cat-value option[value=" + title + "]").detach();
а затем, чтобы отменить это:
$("#edit-field-service-sub-cat-value").append(selectItems);
Лучше всего установить disabled = true для элементов опции, которые вы хотите отключить, а затем в наборе CSS
option:disabled {
display: none;
}
Таким образом, даже если браузер не поддерживает скрытие отключенного элемента, он по-прежнему не может быть выбран.. но в браузерах, которые его поддерживают, они будут скрыты.
Проблема заключается в том, что Internet Explorer, похоже, не поддерживает методы скрытия и show для выбранных опций. Я хотел скрыть все параметры моего выбора ddlReasonCode, у которого не было выбранного в данный момент типа в качестве значения атрибута attType.
Пока прекрасный Хром был вполне удовлетворен:
//Hiding all options
$("#ddlReasonCode").children().hide();
//Showing only the relevant options
$("#ddlReasonCode").children("option[atttype=\"" + CurrentType + "\"]").show();
Это то, что нужно IE (дети, не пробуйте это в CHROME: -)):
//Hiding all options
$("#ddlReasonCode option").each(function (index, val) {
if ($(this).is('option') && (!$(this).parent().is('span')) && ($(this).atttype != CurrentType))
$(this).wrap('<span>').hide();
});
//Showing only the relevant options
$("#ddlReasonCode option").each(function (index, val) {
if (this.nodeName.toUpperCase() === 'OPTION') {
var span = $(this).parent();
var opt = this;
if ($(this).parent().is('span') && ((this).atttype == CurrentType)) {
$(opt).show();
$(span).replaceWith(opt);
}
}
});
Я обнаружил, что идея обертывания http://ajax911.com/hide-options-selecbox-jquery/
После тестирования решения, опубликованные различными способами, включая хаос, для скрытия элементов, теперь работают в последних версиях Firefox (66.0.4), Chrome (74.0.3729.169) и Edge (42.17134.1.0).
$("#edit-field-service-sub-cat-value option[value=" + title + "]").hide();
$("#edit-field-service-sub-cat-value option[value=" + title + "]").show();
Для IE это не работает, однако вы можете отключить эту опцию
$("#edit-field-service-sub-cat-value option[value=" + title + "]").attr("disabled", "disabled");
$("#edit-field-service-sub-cat-value option[value=" + title + "]").removeAttr("disabled");
а затем форсировать выбор другого значения.
$("#edit-field-service-sub-cat-value").val("0");
Обратите внимание, что для отключенного параметра значение раскрывающегося списка теперь будет нулевым, а не значение выбранного параметра, если оно отключено.
Я пытался скрыть параметры из одного списка выбора на основе выбранной опции из другого списка выбора. Он работал в Firefox3, но не в Internet Explorer 6. У меня есть некоторые идеи здесь и теперь есть решение, поэтому я хотел бы поделиться:
function change_fruit(seldd) {
var look_for_id=''; var opt_id='';
$('#obj_id').html("");
$("#obj_id").append("<option value='0'>-Select Fruit-</option>");
if(seldd.value=='0') {
look_for_id='N';
}
if(seldd.value=='1'){
look_for_id='Y';
opt_id='a';
}
if(seldd.value=='2') {
look_for_id='Y';
opt_id='b';
}
if(seldd.value=='3') {
look_for_id='Y';
opt_id='c';
}
if(look_for_id=='Y') {
$("#obj_id_all option[id='"+opt_id+"']").each(function() {
$("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
});
}
else {
$("#obj_id_all option").each(function() {
$("#obj_id").append("<option value='"+$(this).val()+"'>"+$(this).text()+"</option>");
});
}
}
<select name="obj_id" id="obj_id">
<option value="0">-Select Fruit-</option>
<option value="1" id="a">apple1</option>
<option value="2" id="a">apple2</option>
<option value="3" id="a">apple3</option>
<option value="4" id="b">banana1</option>
<option value="5" id="b">banana2</option>
<option value="6" id="b">banana3</option>
<option value="7" id="c">Clove1</option>
<option value="8" id="c">Clove2</option>
<option value="9" id="c">Clove3</option>
</select>
<select name="fruit_type" id="srv_type" onchange="change_fruit(this)">
<option value="0">All</option>
<option value="1">Starts with A</option>
<option value="2">Starts with B</option>
<option value="3">Starts with C</option>
</select>
<select name="obj_id_all" id="obj_id_all" style="display:none;">
<option value="1" id="a">apple1</option>
<option value="2" id="a">apple2</option>
<option value="3" id="a">apple3</option>
<option value="4" id="b">banana1</option>
<option value="5" id="b">banana2</option>
<option value="6" id="b">banana3</option>
<option value="7" id="c">Clove1</option>
<option value="8" id="c">Clove2</option>
<option value="9" id="c">Clove3</option>
</select>
Он был проверен как работающий в Firefox 3 и Internet Explorer 6.
Кажется, вам также нужно обновить атрибут "selected". В противном случае текущая выбранная опция может продолжать отображаться - хотя она, вероятно, исчезнет, когда вы действительно перейдете к выбору варианта (что для меня это сделало): Попробуйте сделать это:
$('#mySelector').children('option').hide();
$('#mySelector').children('option').removeAttr("selected"); //this may be overkill.
$('#mySelector').children('option[value="'+SelVal+'"]').show();
$('#mySelector').children(':visible').attr('selected','selected'); //assuming that something is still on the list.
Чтобы избежать конкатенации строк, вы можете использовать jQuery.grep
$($.grep($("#edit-field-service-sub-cat-value option"),
function(n,i){
return n.value==title;
})
).hide()
Вероятно, не такой элегантный, как многоразовый плагин jquery. но другой подход состоит в том, чтобы просто сохранить элементы элементов и поменять их по мере необходимости:
var SelectFilter = function ()
{
this.allOptions = $("#someSelect option");
this.fooBarOptions= $("#someSelect option[value='foo']");
this.fooBarOptions= this.fooBarOptions.add($("#someSelect option[value='bar']"));
this.showFooBarOptions = function()
{
$("#someSelect option").remove();
$("#someSelect").append(this.fooBarOptions);
};
this.showAllOptions = function()
{
$("#someSelect option").remove();
$("#someSelect").append(this.allOptions);
};
};
сделайте это, чтобы использовать объект:
var filterObject = new SelectFilter();
filterObject.showFooBarOptions ();
Я реализовал решение, используя функцию, которая фильтрует combobox (<select>) на основе пользовательских атрибутов данных. Это решение поддерживает:
<option>, чтобы показать, когда фильтр оставит выбранным пустое.<option> элементы без атрибута фильтра данных остаются нетронутыми.Протестировано с помощью jQuery 2.1.4 и Firefox, Chrome, Safari и IE 10 +.
Это пример HTML:
<select id="myCombobox">
<option data-filter="1" value="AAA">Option 1</option>
<option data-filter="1" value="BBB">Option 2</option>
<option data-filter="2" value="CCC">Option 3</option>
<option data-filter="2" value="DDD">Option 4</option>
<option data-filter="3" value="EEE">Option 5</option>
<option data-filter="3" value="FFF">Option 6</option>
<option data-filter-emptyvalue disabled>No Options</option>
</select>
Код jQuery для фильтрации:
function filterCombobox(selectObject, filterValue, autoSelect) {
var fullData = selectObject.data("filterdata-values");
var emptyValue = selectObject.data("filterdata-emptyvalue");
// Initialize if first time.
if (!fullData) {
fullData = selectObject.find("option[data-filter]").detach();
selectObject.data("filterdata-values", fullData);
emptyValue = selectObject.find("option[data-filter-emptyvalue]").detach();
selectObject.data("filterdata-emptyvalue", emptyValue);
selectObject.addClass("filtered");
}
else {
// Remove elements from DOM
selectObject.find("option[data-filter]").remove();
selectObject.find("option[data-filter-emptyvalue]").remove();
}
// Get filtered elements.
var toEnable = fullData.filter("option[data-filter][data-filter='" + filterValue + "']");
// Attach elements to DOM
selectObject.append(toEnable);
// If toEnable is empty, show empty option.
if (toEnable.length == 0) {
selectObject.append(emptyValue);
}
// Select First Occurrence
if (autoSelect) {
var obj = selectObject.find("option[selected]");
selectObject.val(obj.length == 0 ? toEnable.val() : obj.val());
}
}
Чтобы использовать его, вы просто вызываете функцию со значением, которое хотите сохранить.
filterCombobox($("#myCombobox"), 2, true);
Затем результирующий выбор будет:
<select id="myCombobox">
<option data-filter="2" value="CCC">Option 3</option>
<option data-filter="2" value="DDD">Option 4</option>
</select>
Оригинальные элементы сохраняются функцией data(), поэтому последующие вызовы будут добавлять и удалять правильные элементы.
В ответе указывается, что @ недействителен для новых итераций jQuery. Хотя это верно, некоторые старые IE все еще не скрывают элементы опции. Для всех, кто имеет дело со скрытыми элементами элементов в затронутых версиях, я разместил обходное решение здесь:
http://work.arounds.org/issue/96/option-elements-do-not-hide-in-IE/
В принципе просто оберните его пролетом и замените на шоу.
Любой, спотыкающийся о этот вопрос, может также рассмотреть возможность использования Chosen, что значительно расширяет возможности выбора.
$("option_you_want_to_hide").addClass('hidden')
Затем в вашем css убедитесь, что у вас есть
.hidden{
display:none;
}
Я знаю, что на этот вопрос был дан ответ. Но мое требование было несколько иным. Вместо значения я хотел бы фильтровать по тексту. Поэтому я изменил ответ на @William Herry следующим образом.
var array = ['Administration', 'Finance', 'HR', 'IT', 'Marketing', 'Materials', 'Reception', 'Support'];
if (somecondition) {
$(array).each(function () {
$("div#deprtmnts option:contains(" + this + ")").unwrap();
});
}
else{
$(array).each(function () {
$("div#deprtmnts option:contains(" + this + ")").wrap('<span/>');
});
}
Таким образом, вы можете использовать значение также путем замены, как это показано
$("div#ovrcateg option[value=" + this + "]").wrap('<span/>');
Для параметра hide в выберите:
option_node.hidden = true; # For hide selcet item
option_node.hidden = false; # For show selcet item
Где option_node HTMLOptionElement
P.S.: Я не использую JQuery, но думаю, что он будет работать:
$('.my_select option[value="my_cool_value"]').hidden = true
Я считаю, что лучше всего полностью удалить DOM.
$(".form-group #selectId option[value='39']").remove();
Кросс-браузер совместим. Работает на IE11 тоже
Вы можете показать/скрыть имя Value или класса. Проверьте ссылку ниже с рабочим примером.
Показать/скрыть jquery выбранные параметры со значением или с именем класса.
$('#id').val($('#id option:eq(0)').hide());
: опция eq (0) -hide с индексом '0' в поле выбора.