输入SA身份证号时自动切换Select选项并获取性别值（JavaScript）

前提说明 #

南非13位身份证号的第7位数字用于标识性别：

• 0-4 → 女性（Female）
• 5-9 → 男性（Male）

1. 输入身份证号时自动切换性别选项 #

通过监听身份证输入框的input事件，实时解析身份证号并更新性别选择控件的选中状态。

HTML结构 #

<!-- 身份证输入框 -->
<input type="text" id="saIdInput" maxlength="13" placeholder="输入13位南非身份证号">
<!-- 性别选择控件 -->
<select id="genderSelect">
  <option value="">请选择性别</option>
  <option value="female">女性</option>
  <option value="male">男性</option>
</select>

JavaScript实现 #

const idInput = document.getElementById('saIdInput');
const genderSelect = document.getElementById('genderSelect');

// 监听身份证输入事件
idInput.addEventListener('input', function() {
  const idNumber = this.value.trim();
  
  // 仅当输入的是13位纯数字时处理
  if (!/^\d{13}$/.test(idNumber)) {
    // 不符合格式时清空选中状态
    genderSelect.value = '';
    return;
  }
  
  // 提取第7位数字（数组索引为6，从0开始计数）
  const genderCode = parseInt(idNumber[6], 10);
  
  // 根据规则设置性别选中值
  if (genderCode >= 0 && genderCode <=4) {
    genderSelect.value = 'female';
  } else if (genderCode >=5 && genderCode <=9) {
    genderSelect.value = 'male';
  } else {
    // 异常情况清空选中
    genderSelect.value = '';
  }
});

2. 输入身份证号时自动获取性别控件的选项值 #

在用户输入身份证号的过程中（或完成输入后），可以直接读取性别选择控件的当前选项值，结合自动设置逻辑使用：

修改后的JavaScript代码 #

const idInput = document.getElementById('saIdInput');
const genderSelect = document.getElementById('genderSelect');

idInput.addEventListener('input', function() {
  const idNumber = this.value.trim();
  
  // 先执行自动设置性别的逻辑
  if (/^\d{13}$/.test(idNumber)) {
    const genderCode = parseInt(idNumber[6], 10);
    if (genderCode >=0 && genderCode <=4) {
      genderSelect.value = 'female';
    } else if (genderCode >=5 && genderCode <=9) {
      genderSelect.value = 'male';
    } else {
      genderSelect.value = '';
    }
  } else {
    genderSelect.value = '';
  }
  
  // 获取当前性别控件的选项值和文本
  const selectedValue = genderSelect.value;
  const selectedText = genderSelect.selectedOptions[0]?.text || '';
  
  // 根据需求使用获取到的值，例如打印到控制台或赋值给其他元素
  console.log('当前性别选项值:', selectedValue);
  console.log('当前性别选项文本:', selectedText);
});

关键说明 #

• 使用selectedOptions[0]?.text可以安全获取选中选项的文本内容，避免控件未选中时出现报错。
• 如果不需要自动设置性别，仅需获取当前选中值，直接去掉自动设置的逻辑即可。

内容的提问来源于stack exchange，提问作者Gerald Raphela