基于输入值自动选中预订表单Select选项的技术求助

Hey there! Let's figure out why your fillchild function isn't working and get it sorted step by step. First, let's make sure we're aligned on the goal: we need to parse that read-only input's value (like 1 ,8*1 ,11) and auto-select the right options in each room's child count and age dropdowns, based on the number of rooms from the hidden .rooms input.

First, Let's Assume Your HTML Looks Something Like This #

(If your structure is different, just adjust the selectors in the code below!)

<!-- Hidden input for room count -->
<input type="hidden" class="rooms" value="2">
<!-- Read-only input with child data -->
<input type="text" readonly id="childDetails" value="1 ,8*1 ,11">

<!-- Room containers (one per room) -->
<div class="room-section">
  <select class="child-number">
    <option value="0">0 Kids</option>
    <option value="1">1 Kid</option>
    <option value="2">2 Kids</option>
  </select>
  <select class="kid-age">
    <option value="1">1</option>
    <option value="8">8</option>
    <option value="11">11</option>
    <!-- Add more age options as needed -->
  </select>
</div>
<div class="room-section">
  <!-- Same selectors for the second room -->
  <select class="child-number">...</select>
  <select class="kid-age">...</select>
</div>

Common Issues That Might Break Your Function #

1. Unclean string parsing: The spaces in your input value (like 1 ,8) can mess up splitting logic.
2. Mismatched room indices: Not linking the first set of data to the first room, second set to the second room, etc.
3. Running code before the DOM is ready: Trying to select elements that haven't loaded yet.
4. Incorrect selectors: Targeting the wrong elements in your HTML.

Fixed fillchild Function #

Here's a revised version that addresses these issues:

function fillchild() {
  // Get the number of rooms from the hidden input
  const totalRooms = parseInt(document.querySelector('.rooms').value);
  if (isNaN(totalRooms)) return; // Exit if room count is invalid

  // Clean up the child data string and split into room-specific entries
  const childDataRaw = document.getElementById('childDetails').value;
  // Remove all spaces, then split by * to get each room's data
  const roomChildData = childDataRaw.replace(/\s+/g, '').split('*');

  // Loop through each room to set the dropdowns
  for (let i = 0; i < totalRooms; i++) {
    // Get the current room's container
    const currentRoom = document.querySelectorAll('.room-section')[i];
    if (!currentRoom) continue; // Skip if the room container doesn't exist

    // Split the room's child data into count and age
    const [childCount, childAge] = roomChildData[i].split(',').map(val => parseInt(val));
    
    // Set the child count dropdown
    const countDropdown = currentRoom.querySelector('.child-number');
    if (countDropdown) {
      countDropdown.value = childCount.toString();
    }

    // Set the child age dropdown
    const ageDropdown = currentRoom.querySelector('.kid-age');
    if (ageDropdown) {
      ageDropdown.value = childAge.toString();
    }
  }
}

// Make sure we run the function after the DOM is fully loaded
document.addEventListener('DOMContentLoaded', () => {
  fillchild();
  
  // Optional: Re-run if the room count changes
  document.querySelector('.rooms').addEventListener('change', fillchild);
});

Key Fixes & Explanations #

• String cleaning: replace(/\s+/g, '') strips all spaces from the input string, so 1 ,8 becomes 1,8—no more split errors!
• Room indexing: We loop through each room using the same index as the parsed child data array, ensuring the first room gets the first set of values.
• DOM readiness: Wrapping the function call in DOMContentLoaded ensures we don't try to select elements before they exist.
• Safety checks: We add checks for missing elements (like if a room container doesn't exist) to avoid errors.

Quick Notes for Your Setup #

• Double-check that your HTML class names match the selectors in the code (e.g., if your room containers use class="room" instead of room-section, update the query selector).
• If you ever need to handle multiple kids per room (like 2 ,5,7 for 2 kids aged 5 and 7), you'll need to adjust the parsing logic to handle multiple age values, but this code works perfectly for your current single-child-per-room use case.
• If rooms are dynamically added (based on the .rooms value), make sure you call fillchild() right after adding the new room elements.

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