我有一个包含键/值对选项的对象，我想将其从选择列表中隐藏或删除。
以下两个选项选择器都不起作用。我错过了什么？
$.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选择器元字符，则可能会以各种可怕的方式破坏。
跨浏览器中不能这样做。如果我没记错，IE会有问题。 最简单的方法是在删除项目之前保留
我找到了一种更好的方法，而且非常简单：
$("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();
}
});
});
可以跨浏览器完成，只需要一些自定义编程。请查看我的fiddle：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;
}
}
resultgood 只是一个检查是否添加了任何 optionlisting 的方法。如果有，就会返回 <option> 列表。如果没有，则不返回任何内容，这正是您希望的，如果您意外地包含了一个实际上不存在的类（在此示例中，例如 sub-Food6）。要在下拉列表中返回空白，请将函数开头的声明行更改为 var optionlisting="<option value=''></option>";。 - Sablefostedata属性；这更符合语义。 - Sablefoste这在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"）。如果我们省略它，该选项将被禁用，但在我们展开下拉菜单之前，仍会显示"enabled"选项。因此，我们将焦点传递给另一个选项以避免这种情况。
option:disabled {
display: none;
}
这样即使浏览器不支持隐藏禁用项，它仍然无法被选中。但是在支持它的浏览器上，它们将被隐藏。
请看这个问题和答案 -
查看你的代码，你可能需要引用属性值。
$("#edit-field-service-sub-cat-value option[value='title']").hide();
引号是可选的，但在值包含“]”等字符时应使用引号以避免冲突。
编辑：
刚刚意识到您从函数参数中获取标题，在这种情况下，语法应为
$("#edit-field-service-sub-cat-value option[value='" + title + "']").hide();
经过测试，包括chaos在内的其他人发布的隐藏元素的解决方案，现在无法在最新版的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();
$("#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");
请注意，对于禁用的选项，下拉列表的值现在将为null，而不是所选选项的值（如果该选项已禁用）。
参考redsquare的建议，我最终做了这个：
var selectItems = $("#edit-field-service-sub-cat-value option[value=" + title + "]").detach();
接着要反转它：
$("#edit-field-service-sub-cat-value").append(selectItems);