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();

当您换行<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/

同时检查：

Answer 2

请注意，根据HTML规范（http://www.w3.org/TR/html5/forms.html#the-select-element），<select>应仅包含<option>或<optgroup>或支持脚本的元素。因此，您应该避免使用无效的<span>包装，而只需删除＆amp;恢复您的<option>元素。

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

删除包含<option>标记</option> </span>的<span>标记

2 个答案:

相反，你可以使用它：

在您的代码中：

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

同时检查：