javascript - 删除处理 JQuery 选项，隐藏不？

Question

得到这个 HTML:

<select class="trackChanges department" id="DepartmentID_0" name="DepartmentID_0">
    <option value="3">DC</option>
    <option value="5">PL</option>
    <option value="7">SA</option>
</select>

使用此 javascript 和 jQuery 迭代选项:

var departmentDDL = $(row).find('[id*="DepartmentID_"] > option');

departmentDDL.each(function () {
    if ($(this)[0].innerHTML != "SA") {
        $(this).hide();    // this does not work
        $(this).remove();  // this works
    }
});

我试图隐藏选项，而不是删除它们。为什么一个有效而另一个无效？

Answer 1

你的 if 中有一个额外的 (，删除它，它会工作，但只在 Chrome 中有一点错误行为。

var departmentDDL = $('[id*="DepartmentID_"] > option');

departmentDDL.each(function() {
  if ($(this)[0].innerHTML != "SA") {
    $(this).hide(); // this does not work
    //$(this).remove();  // this works
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="trackChanges department" id="DepartmentID_0" name="DepartmentID_0">
    <option value="3" >DC</option>
    <option value="5">PL</option>
    <option value="7">SA</option>
</select>

注意 隐藏 HTML 选项在跨浏览器时存在多个问题，并且在某些浏览器中不会给出预期的结果，有关详细信息，请查看 How to hide a <option> in a <select> menu with CSS?