实现Select下拉框联动：首个下拉框值小于第二个时自动同步

Got it, let's build this form interaction exactly as you described. The goal is: whenever the value selected in the first dropdown (from_age_js) is smaller than the second dropdown's value, automatically update the second dropdown to match the first one.

Step 1: Complete HTML Context #

First, let's assume your second age dropdown has an id like to_age_js (adjust this if your actual id is different). Here's a full example of the HTML structure:

<select id="from_age_js" name="from_age" class="select-advertise-style">
  <option value="f13">13</option>
  <option value="f14">14</option>
  <option value="f15">15</option>
  <option value="f16">16</option>
  <option value="f17">17</option>
  <option value="f18">18</option>
</select>

<select id="to_age_js" name="to_age" class="select-advertise-style">
  <option value="t13">13</option>
  <option value="t14">14</option>
  <option value="t15">15</option>
  <option value="t16">16</option>
  <option value="t17">17</option>
  <option value="t18">18</option>
</select>

Step 2: JavaScript Implementation #

Add this script to handle the sync logic. I'll break down what each part does so you can adjust it to your exact HTML setup:

// Get references to both dropdown elements
const fromAgeSelect = document.getElementById('from_age_js');
const toAgeSelect = document.getElementById('to_age_js');

// Function to sync the dropdown values
function syncAgeDropdowns() {
  // Extract the numeric age from each dropdown's value
  // Adjust the string replacement if your value format is different (e.g., if values are just numbers, skip the replace)
  const fromAge = parseInt(fromAgeSelect.value.replace('f', ''));
  const toAge = parseInt(toAgeSelect.value.replace('t', ''));

  // Check if from age is smaller than to age
  if (fromAge < toAge) {
    // Update the second dropdown to match the first's age
    // Match the value format of your second dropdown (e.g., use `fromAge` directly if values are numbers)
    toAgeSelect.value = `t${fromAge}`;
  }
}

// Run the sync when the first dropdown changes
fromAgeSelect.addEventListener('change', syncAgeDropdowns);

// Also run sync on page load to fix any initial mismatched values
document.addEventListener('DOMContentLoaded', syncAgeDropdowns);

Key Notes for Customization #

• Adjust Value Formats: If your second dropdown uses a different value pattern (e.g., no prefix like t, just plain numbers), modify the replace calls and the value assignment line. For example, if values are just numbers, use toAgeSelect.value = fromAge; instead.
• Dropdown ID: If your second dropdown has a different id (not to_age_js), replace that in the getElementById call.
• Edge Cases: This code handles the core logic, but you can extend it if needed (e.g., disable certain options after sync, or add validation messages).

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