如何获取单选框与下拉框值并推入数组，实现提交存储与调用

先帮你梳理下需求的实现思路，首先得修正原HTML里的几个小问题，再一步步完成JavaScript的核心功能：

修正后的HTML代码 #

原HTML里存在提交按钮位置错误、单选框缺少name属性、元素ID重复的问题，先调整成规范的结构：

<table>
  <tr>
    <td id="gender">
      Sex<br>
      <input type="radio" name="gender" value="Male">Male
      <input type="radio" name="gender" value="Female">Female
    </td>
  </tr>
  <tr>
    <td>
      Age<br>
      <select id="age">
        <option value="" selected style="color: black;">Select Below</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="13">13</option>
        <option value="14">14</option>
        <option value="15">15</option>
      </select>
      <input type="submit" value="Submit" class="sub" onclick="that();">
    </td>
  </tr>
</table>
<!-- 补充搜索输入框，方便用户输入关键词 -->
<input type="text" id="searchInput" placeholder="输入关键词搜索（如性别/年龄）">
<button class="ss" onclick="idnum()" title="Search..">Search</button>
<p id="displayAge">年龄展示区</p>
<p id="displayGender">性别展示区</p>

注意：给性别单选框加上name="gender"属性，才能保证同一时间只能选中一个选项，这是单选框的必要配置。

JavaScript核心功能实现 #

接下来写录入、存储和搜索的逻辑代码：

// 全局数组，用来存储所有用户提交的信息
const userInfoList = [];

// 提交按钮触发的函数
function that() {
  // 获取选中的性别值
  const selectedGender = document.querySelector('input[name="gender"]:checked');
  // 获取年龄下拉框的值
  const selectedAge = document.getElementById('age').value;

  // 验证是否选择了有效选项
  if (!selectedGender) {
    alert('请选择性别！');
    return;
  }
  if (!selectedAge) {
    alert('请选择年龄！');
    return;
  }

  // 组装用户信息对象（后续可以扩展姓氏、出生日期等字段）
  const userInfo = {
    gender: selectedGender.value,
    age: selectedAge
  };

  // 推入数组并打印到控制台
  userInfoList.push(userInfo);
  console.log('当前用户信息数组：', userInfoList);

  // 清空表单，方便下次录入
  document.querySelector('input[name="gender"]:checked').checked = false;
  document.getElementById('age').value = '';
}

// 搜索按钮触发的函数
function idnum() {
  const searchKeyword = document.getElementById('searchInput').value.trim();
  if (!searchKeyword) {
    alert('请输入搜索关键词！');
    return;
  }

  // 遍历数组匹配关键词（支持匹配性别或年龄，可扩展到姓氏等字段）
  const matchedUsers = userInfoList.filter(user => {
    return user.gender.includes(searchKeyword) || user.age.includes(searchKeyword);
  });

  // 展示匹配结果
  const displayAgeEl = document.getElementById('displayAge');
  const displayGenderEl = document.getElementById('displayGender');

  if (matchedUsers.length === 0) {
    displayAgeEl.textContent = '未找到匹配的信息';
    displayGenderEl.textContent = '';
    return;
  }

  // 这里默认展示第一个匹配项，你可以改成循环展示所有匹配结果
  displayAgeEl.textContent = `匹配到的年龄：${matchedUsers[0].age}`;
  displayGenderEl.textContent = `匹配到的性别：${matchedUsers[0].gender}`;
}

功能说明 #

• 录入功能：点击提交按钮时，会先校验是否选择了性别和年龄，校验通过后把信息存入数组，同时在控制台打印当前数组内容，最后清空表单方便下次录入。
• 搜索功能：在输入框输入关键词（比如"Male"、"12"），点击搜索按钮后会在数组中匹配符合条件的信息，并展示到页面的指定区域。如果需要按姓氏搜索，只需要在userInfo对象中添加surname字段，再在搜索逻辑里加上对应匹配规则即可。

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