html select 隐藏,如何在带有CSS的<select>菜单中隐藏<选项>？

最新推荐文章于 2022-04-11 15:36:38 发布

主播仁杰

最新推荐文章于 2022-04-11 15:36:38 发布

阅读量858

点赞数

文章标签： html select 隐藏

本文介绍了一种使用jQuery来高效管理下拉菜单选项的方法。通过保存、移除和恢复选项，可以实现动态更新下拉列表的功能，同时保持网页的有效性和整洁。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我建议你不使用使用包装，因为它不是有效的HTML，这可能会导致问题的道路上。我认为首选的解决方案是实际删除任何您希望隐藏的选项，并根据需要进行恢复。使用jQuery，您只需要以下3个函数：

第一个函数将保存选择..为了安全起见，您可能需要在加载页面时调用此函数。function setOriginalSelect ($select) {

if ($select.data("originalHTML") == undefined) {

$select.data("originalHTML", $select.html());

} // If it's already there, don't re-set it}

下一个函数调用上面的函数，以确保保存了原始内容，然后简单地从DOM中删除这些选项。function removeOptions ($select, $options) {

setOriginalSelect($select);

$options.remove();

}

当您想要“重置”回所有原始选项时，可以使用最后一个函数。function restoreOptions ($select) {

var ogHTML = $select.data("originalHTML");

if (ogHTML != undefined) {

$select.html(ogHTML);

}}

注意，所有这些函数都期望您传递jQuery元素。例如：// in your search function...var $s = $('select.someClass');var $optionsThatDontMatchYourSearch= $s.find('options.someOtherClass');restoreOptions($s); // Make sure you're working with a full deckremoveOptions($s, $optionsThatDontMatchYourSearch); // remove options not needed