循环字符串数组无法访问option变量，获取select选项遇语法错误

我来帮你搞定这两个问题，咱们一步步拆解：

1. 选择器语法错误的原因与解决 #

你遇到的Uncaught Error: Syntax error, unrecognized expression，核心原因是jQuery选择器字符串不会自动解析JS变量。你写的#workShop option[value=parentClosedWS[i]]里，parentClosedWS[i]会被当成字面量字符串，而不是数组元素的实际值，自然会触发语法错误。

这里有两种可靠的解决方式：

方式一：字符串拼接选择器（注意转义特殊字符） #

把数组元素的值拼接到选择器字符串里，如果你的value值可能包含空格、引号这类特殊字符，记得用$.escapeSelector()转义，避免再次触发语法错误：

var parentClosedWS = <?php echo json_encode($parentClosedWS);?>;
// 循环数组
for(let i = 0; i < parentClosedWS.length; i++){
  // 转义特殊字符后拼接选择器
  var value = $.escapeSelector(parentClosedWS[i]);
  var option = $('#workShop option[value="' + value + '"]');
  // 这里可以操作option了，比如隐藏/选中
  console.log(option);
}

方式二：使用filter()方法（更安全推荐） #

这种方法不需要拼接选择器，直接筛选符合条件的option，完全避开选择器语法问题，尤其适合value值有特殊字符的场景：

var parentClosedWS = <?php echo json_encode($parentClosedWS);?>;
var $options = $('#workShop option');
// 循环数组
parentClosedWS.forEach(function(value){
  var targetOption = $options.filter(function(){
    return $(this).val() === value;
  });
  // 操作目标选项
  console.log(targetOption);
});

2. 循环数组时无法访问option变量的问题 #

如果是用var声明循环变量导致的作用域问题（比如循环结束后所有迭代都引用同一个变量），建议换成let声明循环变量，或者用forEach遍历数组（像上面方式二那样），这样每个迭代的变量都是独立的，能正确访问到对应的option。

举个反例（错误的写法）：

// 用var的话，所有迭代的i都是同一个变量，循环结束后i是数组长度，会出问题
for(var i = 0; i < parentClosedWS.length; i++){
  var option = $('#workShop option[value="' + parentClosedWS[i] + '"]');
  setTimeout(function(){
    console.log(option); // 这里可能拿到的都是最后一个option
  }, 100);
}

改成let就没问题了：

for(let i = 0; i < parentClosedWS.length; i++){
  var value = $.escapeSelector(parentClosedWS[i]);
  var option = $('#workShop option[value="' + value + '"]');
  console.log(option); // 每个迭代都能拿到正确的option
}

内容的提问来源于stack exchange，提问作者shrouk mansour