为多个文本框分配变量：表单文本框关联Class变量的实现问题

Hey Cathy, let's work through this issue step by step—since you swapped out the dropdown for a text input, the main challenge now is linking each participant's text input to their unique Class variable, and making sure the Events dropdowns still populate correctly. Here's how to fix this:

1. 给每个参与者的文本框添加唯一标识 #

First, you need a way to tell each text input apart (since you have 15 participants). Add a unique id and a data-participant attribute to each Class text input, and match the IDs of their corresponding Events dropdowns to this identifier. For example:

<!-- 参与者1的Class输入框与Events下拉框 -->
<input type="text" id="class-input-1" data-participant="1" placeholder="输入Class编号">
<select id="event-1-1"></select>
<select id="event-1-2"></select>
<select id="event-1-3"></select>

<!-- 参与者2的Class输入框与Events下拉框 -->
<input type="text" id="class-input-2" data-participant="2" placeholder="输入Class编号">
<select id="event-2-1"></select>
<select id="event-2-2"></select>
<select id="event-2-3"></select>

This data-participant attribute will let your JavaScript know exactly which participant's data you're working with.

2. 修改JavaScript逻辑来关联文本框与变量 #

Your original line var class_id = class_dropdown.value ; worked for a single dropdown, but now we need to handle multiple text inputs and link each to their participant's data. Here's updated code to make this work:

// 给所有Class文本框绑定输入事件
document.querySelectorAll('[data-participant]').forEach(input => {
  input.addEventListener('input', function() {
    // 获取当前对应的参与者ID
    const participantId = this.dataset.participant;
    // 获取文本框中的Class值（去除首尾空格避免无效输入）
    const classId = this.value.trim();

    // 如果没有输入Class，清空对应的Events下拉框
    if (!classId) {
      for (let i = 1; i <= 3; i++) {
        const eventSelect = document.getElementById(`event-${participantId}-${i}`);
        eventSelect.innerHTML = '<option value="">请先输入Class</option>';
      }
      return;
    }

    // 调用填充Events的函数，传入Class值和参与者ID
    populateEvents(classId, participantId);
  });
});

// 填充对应参与者的Events下拉框
function populateEvents(classId, participantId) {
  // 这里替换成你原来根据Class获取Events的逻辑（比如API请求或本地数据）
  const events = getEventsForClass(classId);

  // 遍历三个Events下拉框，填充选项
  for (let i = 1; i <= 3; i++) {
    const eventSelect = document.getElementById(`event-${participantId}-${i}`);
    eventSelect.innerHTML = ''; // 清空原有选项

    // 添加新的Events选项
    events.forEach(event => {
      const option = document.createElement('option');
      option.value = event.id;
      option.textContent = event.name;
      eventSelect.appendChild(option);
    });
  }
}

// 模拟根据Class获取Events的函数（替换成你实际的数据源）
function getEventsForClass(classId) {
  // 示例：根据Class返回对应的事件列表
  return [
    { id: `evt-${classId}-1`, name: `事件1 (Class ${classId})` },
    { id: `evt-${classId}-2`, name: `事件2 (Class ${classId})` },
    { id: `evt-${classId}-3`, name: `事件3 (Class ${classId})` }
  ];
}

3. 关键注意事项 #

• 唯一性是核心: Make sure every participant's input and dropdowns have unique IDs tied to their data-participant value—this prevents mixing up data between participants.
• 输入校验: You might want to add checks (like regex) to ensure the text input matches your Class format (e.g., only numbers/letters) to avoid invalid requests.
• 事件选择: I used the input event for real-time updates, but if you prefer to trigger the fill only when the user finishes typing, swap it for the blur event instead.

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