在 jquery 中转义选择选项值答案

【问题标题】：Escaping select option values in jquery在 jquery 中转义选择选项值
【发布时间】：2017-07-10 12:57:02
【问题描述】：

我有一堆选择框用于过滤一个大型复杂表，其内容是通过一系列 ajax 查询加载的。随着表格的加载，不仅表格而且选择框过滤器都会更新以反映当前可用的选项。由于此时用户可能已经选择了过滤表格的选项，所以我有一些代码来保留当前选择的值：

    if($('#CourseFilter').length) {
        selected = $('#CourseFilter').val();
        $('#CourseFilter').replaceWith(sel);
        if(selected != '') $('#CourseFilter option[value="'+escape(selected)+'"]').prop('selected', true);
    } else {
        sel.appendTo('#filters'); // Adding fitler for first time.
    }

这适用于大多数过滤器，但有一些过滤器，例如 #CourseFilter，会重置为默认值，而不是记住当前的选择。它认为是因为这些列表中的值包含特殊字符，例如-、/ 和\。我试过使用escape，但还是不行。有什么想法吗？

【问题讨论】：

标签： javascript jquery jquery-selectors escaping html-select

【解决方案1】：

您可能在寻找什么：

您应该能够只设置sel 的值，而不是找到正确的<option> 并手动选择它：

sel.val(selected);

如果你想找到合适的<option>：

您可以通过使用 jQuery.filter 过滤正确的<option> 来完全避免转义问题：

$('#CourseFilter option').filter(function() {
  return $(this).val() === selected;
}).prop('selected', true);

【讨论】：

我避免使用 sel.val(selected)，因为它可能会从无效值创建选项。另一方面，我可能不会给它传递一个无效值，所以它应该是安全的......
.val(...) 不会创建新的<option>，所以应该可以安全使用。
啊，好吧。我在其他一些 SO 答案的 cmets 中读到它确实如此。也许该行为已修复或评论有误。感谢您的澄清...
您可以自己轻松地证明或反驳这一点。创建一个空的<select>，在上面调用.val("foo")，看看有没有新的<option>添加了。
谢谢。事实证明，我无论如何都走错了路。不良行为实际上是由一段冲突的旧代码引起的！

【解决方案2】：

无需查找每个<option>，因为val() 既是getter 又是setter。

只需使用val() 为新的<select> 设置值

if($('#CourseFilter').length) {
    selected = $('#CourseFilter').val();
    $('#CourseFilter').replaceWith(sel);
    sel.val(selected);
} else {
    sel.appendTo('#filters'); // Adding fitler for first time.
}

【讨论】：