javascript - 去除缠绕的标签标签

Question

我试图在下拉列表中隐藏和显示标签，我最初设法在 Internet Explorer 中的所有内容中工作。然后我发现将需要隐藏在标签中的选项包装起来解决了 IE 问题。但是我现在在删除它们时遇到了问题，因为我编写的代码也删除了它们包含的下拉列表。我做错了什么？这是到目前为止的代码：

function GetMonthsForSelectedYear() {
    var selectedYear = $("#DropDownListYear option:selected").text(),
        currentYear = (new Date()).getFullYear(),
        currentMonth = (new Date()).getMonth() + 1;

    $("#DropDownListMonth option").each(function() {
        if (selectedYear == currentYear) {
            var option = $(this).index();
            if (option < currentMonth) {
                $(this).wrap('<span>').hide();
            }
        } else {
            $(this).unwrap("<span>").show();
        }
    });
}

$("#DropDownListYear").change(function() {
   GetMonthsForSelectedYear();
});​

这是在 JSFiddle 中：

http://jsfiddle.net/MGGh9/1/

谢谢。

Answer 1

相反，你可以使用这个：

$("#DropDownListMonth option[value=" + title + "]").hide();

当你包裹 a<span>时，它包裹了整个<select>，而不仅仅是那个<option>。这是预期的行为。此外，在标签之外option或optgroup在select标签内添加任何内容都不是正确的方法。

在您的代码中：

function GetMonthsForSelectedYear() {
    var yearOfEntry = $("#DropDownListYear option:selected").text(),
        currentYear = (new Date()).getFullYear(),
        currentMonth = (new Date()).getMonth() + 1;

    $("#DropDownListMonth option").each(function() {
        if (yearOfEntry == currentYear) {
            var option = $(this).index();
            if (option < currentMonth) {
                $(this).hide();               // «--------- This one
            }
        } else {
            $(this).show();                   // «--------- This one
        }
    });
}

$("#DropDownListYear").change(function() {
   GetMonthsForSelectedYear();
});​

小提琴：http: //jsfiddle.net/MGGh9/2/

还要检查：

1. 如何使用 CSS 在 <select> 菜单中隐藏 <option>？
2. 如何使用 JavaScript 隐藏选择选项？（跨浏览器）

Answer 2

请注意，根据 HTML 规范 ( http://www.w3.org/TR/html5/forms.html#the-select-element )， a<select>应该只包含<option>或<optgroup>或支持脚本的元素。所以你应该避免使用无效<span>的包装器，而只是删除和恢复你的<option>元素。

看到这个答案 - https://stackoverflow.com/a/24439289/1766230 - 这个问题 - How to hide a <option> in a <select> menu with CSS? .