jQuery实现：仅当下拉框无选中项时设置新添加选项为选中

我来帮你搞定这个需求！你要实现的是：AJAX提交表单添加数据后，把新选项同步到所有.Groupement_groupe下拉框里，并且只有当下拉框当前没有选中任何有效值时，才自动选中这个新选项对吧？

先说说你之前代码的问题：

• 第一段代码给所有新选项直接加了selected: true，所以不管下拉框有没有已选中的值，都会强制选中新选项，这就导致了所有下拉框都被修改的问题。
• 第二段代码只是简单地添加选项，但没有处理选中逻辑，而且你说只对JS生成的新下拉框生效，大概率是因为没有遍历每个下拉框单独处理，导致逻辑没有覆盖到所有元素。

下面是正确的解决方案，用each()遍历每个下拉框，逐个判断状态再处理：

// 假设datasplit[2]是新选项的value，'test'是选项显示文本
$('.Groupement_groupe').each(function() {
  // 1. 创建新的选项元素
  const newOption = $('<option>', {
    value: datasplit[2],
    text: 'test'
  });

  // 2. 将新选项添加到当前下拉框中
  $(this).append(newOption);

  // 3. 判断当前下拉框是否未选中有效值（即选中的是空选项）
  if ($(this).val() === '') {
    // 如果是空的，就把新选项设为选中状态
    newOption.prop('selected', true);
  }
});

代码解释： #

• 用.each()遍历每个匹配的下拉框，这样能单独处理每个元素的状态，不会一刀切。
• 先添加新选项，再检查当前下拉框的选中值：如果val()是空字符串（对应你HTML里的空选项），就把新选项设为选中。
• 这样既保证了所有下拉框都能添加新选项，又不会干扰已经选了值的下拉框。

如果想让代码更健壮，避免重复添加相同value的选项，可以加上重复检查：

$('.Groupement_groupe').each(function() {
  const newValue = datasplit[2];
  // 先检查当前下拉框是否已经存在该value的选项
  if (!$(this).find(`option[value="${newValue}"]`).length) {
    const newOption = $('<option>', {
      value: newValue,
      text: 'test'
    });

    $(this).append(newOption);

    if ($(this).val() === '') {
      newOption.prop('selected', true);
    }
  }
});

这样就完美解决你的需求啦！

内容的提问来源于stack exchange，提问作者Louis D.