如何用jQuery实现输入邮箱后添加至下拉选择框的功能

没问题，我来帮你把这个邀请功能补全，不仅能实现输入邮箱后添加到下拉框，还会加上基础的验证逻辑避免重复或无效输入，提升用户体验。

首先先确认你的HTML结构（和你提供的一致）：

<input type="email" name="invite_people" placeholder="Invite someone">
<a href="#!" class="add_people">Add People</a>
<select name="people_invited">
  <option value=""></option>
</select>

接下来是完整的jQuery实现代码，我会在后面拆解每一步的作用：

$(".add_people").click(function () {
  // 1. 获取输入的邮箱并去除前后空格
  var orang_yg_diinvite = $("input[name='invite_people']").val().trim();
  
  // 2. 验证邮箱格式是否有效且不为空
  var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
  if (!orang_yg_diinvite || !emailRegex.test(orang_yg_diinvite)) {
    alert("请输入有效的邮箱地址！");
    return;
  }
  
  // 3. 检查邮箱是否已经在下拉框中存在，避免重复添加
  var isDuplicate = false;
  $("select[name='people_invited'] option").each(function() {
    if ($(this).val() === orang_yg_diinvite) {
      isDuplicate = true;
      return false; // 跳出循环，没必要继续遍历
    }
  });
  
  if (isDuplicate) {
    alert("该邮箱已经被添加过啦！");
    return;
  }
  
  // 4. 创建新选项并添加到下拉框
  $("select[name='people_invited']").append(`<option value="${orang_yg_diinvite}">${orang_yg_diinvite}</option>`);
  
  // 5. 清空输入框，方便继续添加其他邮箱
  $("input[name='invite_people']").val("");
});

代码功能拆解： #

• 处理输入值：用trim()去掉邮箱前后的空格，避免用户不小心输入的空白字符导致无效添加。
• 邮箱验证：用正则表达式检查输入是否符合标准邮箱格式，同时确保输入不为空，给用户明确的提示。
• 重复检测：遍历下拉框的所有选项，判断当前邮箱是否已经存在，防止重复添加同一个邮箱。
• 添加选项：验证通过后，动态创建一个新的<option>元素，把邮箱同时作为选项的值和显示文本，添加到下拉框中。
• 优化体验：添加完成后清空输入框，用户不用手动删除就能直接输入下一个邮箱。

额外小功能（可选）： #

如果想支持用户按回车键直接触发添加，不用点击按钮，可以再加这段代码：

$("input[name='invite_people']").keypress(function(e) {
  if (e.which === 13) { // 捕捉回车键的按键事件
    $(".add_people").click(); // 触发添加按钮的点击逻辑
    return false; // 阻止默认的表单提交行为（如果有的话）
  }
});

内容的提问来源于stack exchange，提问作者Bariq Dharmawan