删除处理 JQuery 选项，隐藏不？答案

【问题标题】：Remove working on JQuery options, Hide does not?删除处理 JQuery 选项，隐藏不？
【发布时间】：2017-11-21 16:40:04
【问题描述】：

得到了这个 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
    }
});

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

【问题讨论】：

这是因为对隐藏 option 元素的支持在浏览器中是出了名的不稳定。如果你能避免它，我会的。
删除多余的(这里if (($(this)[0]它会工作
@user2486 好地方，但这是问题中的一个错字 - 它不在原始代码中。

标签： javascript jquery html css dom

【解决方案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?

【讨论】：

“一切都完美无缺”夸大了这种情况。这在 Safari 中根本不起作用。仅在 Chrome 和 Firefox 中有效（默认值在用户点击之前仍会出现，即使它应该被隐藏。）
@DanielBeck 我在代码段下提到了这一点。
编辑后的答案稍微好一些，但仍然具有误导性：它在 Chrome 中无法完美运行。原来的默认值在用户点击之前是可见的，应该是隐藏的。

【解决方案2】：

在此处删除多余的( if (($(this)[0]，它将起作用

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

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

<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>

在else部分被选中

【讨论】：

其他答案见 cmets；这在某些浏览器中无法正常工作。
@DanielBeck ：它与选定的项目一起工作$(this).parent().val($(this).val()).change();
不在 Safari 中。不过我得到了纠正，它似乎在 FF 和 Chrome 中有效。
@Daniel Beck：我在 chrome 中进行了测试，我没有 safari，也没有提到这一点。你能在这里帮忙吗？不适合我，适合其他人。
TBH 我认为这个问题的实际正确答案是由 Rory 作为第一条评论发布的：“这是因为对隐藏选项元素的支持在浏览器中是出了名的不稳定。如果你能避免它，我将。”也就是说，如果您想编辑此答案以提及 safari 损坏，我将删除我的反对票（我超出了在没有编辑的情况下撤回投票的时间窗口。）