如何实现下拉菜单区域隔离并动态生成专属关联文本框？

Hey there! Let's figure out how to solve this problem without needing separate parent containers for each dropdown and its corresponding text input. The core idea is to link each dropdown directly to its text box using either DOM relationships or custom data attributes, so they stay isolated even without unique parent wrappers.

Here are two straightforward, scalable solutions you can use:

Solution 1: Use Adjacent DOM Sibling Relationships (Simple & Clean) #

If you can keep the text input immediately after its dropdown in the DOM, we can leverage the nextElementSibling property to find and control the input. This works perfectly for dynamic additions—just make sure each new dropdown is followed by its text input.

Example Code #

HTML (Initial Setup + Dynamic Add Button)

<!-- First dropdown + paired text input -->
<select class="dynamic-dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="other">Other</option>
</select>
<input type="text" class="other-input" placeholder="Enter custom value" style="display: none;">

<!-- Second dropdown + paired text input -->
<select class="dynamic-dropdown">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="other">Other</option>
</select>
<input type="text" class="other-input" placeholder="Enter custom value" style="display: none;">

<!-- Button to add new dropdowns -->
<button id="add-new-dropdown">Add Another Dropdown</button>

JavaScript

// Listen for changes on any dropdown
document.addEventListener('change', (e) => {
  if (e.target.classList.contains('dynamic-dropdown')) {
    const dropdown = e.target;
    // Grab the immediate next sibling (the paired text input)
    const pairedInput = dropdown.nextElementSibling;
    
    // Show/hide the input based on selection
    pairedInput.style.display = dropdown.value === 'other' ? 'block' : 'none';
  }
});

// Handle dynamic dropdown additions
document.getElementById('add-new-dropdown').addEventListener('click', () => {
  const parentContainer = document.body; // Replace with your target container
  
  // Create new dropdown
  const newDropdown = document.createElement('select');
  newDropdown.className = 'dynamic-dropdown';
  newDropdown.innerHTML = `
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="other">Other</option>
  `;
  
  // Create paired text input
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.className = 'other-input';
  newInput.placeholder = 'Enter custom value';
  newInput.style.display = 'none';
  
  // Add both elements to the page (dropdown first, then input)
  parentContainer.appendChild(newDropdown);
  parentContainer.appendChild(newInput);
});

Solution 2: Use Custom Data Attributes (Flexible for Complex DOM) #

If your dropdown and text input can't be adjacent (e.g., they're in different containers), use custom data-* attributes to link them. We'll assign a unique group ID to each pair, so we can always find the matching input for any dropdown.

Example Code #

HTML (Initial Setup + Dynamic Add Button)

<div class="some-container">
  <select class="dynamic-dropdown" data-group="dropdown-1">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="other">Other</option>
  </select>
</div>
<div class="another-container">
  <input type="text" class="other-input" data-group="dropdown-1" placeholder="Enter custom value" style="display: none;">
</div>

<div class="some-container">
  <select class="dynamic-dropdown" data-group="dropdown-2">
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="other">Other</option>
  </select>
</div>
<div class="another-container">
  <input type="text" class="other-input" data-group="dropdown-2" placeholder="Enter custom value" style="display: none;">
</div>

<button id="add-new-dropdown">Add Another Dropdown</button>

JavaScript

// Counter to generate unique group IDs for dynamic pairs
let groupCounter = 3;

// Listen for changes on any dropdown
document.addEventListener('change', (e) => {
  if (e.target.classList.contains('dynamic-dropdown')) {
    const groupId = e.target.getAttribute('data-group');
    // Find the input with the matching group ID
    const pairedInput = document.querySelector(`.other-input[data-group="${groupId}"]`);
    
    pairedInput.style.display = e.target.value === 'other' ? 'block' : 'none';
  }
});

// Handle dynamic dropdown additions
document.getElementById('add-new-dropdown').addEventListener('click', () => {
  const parentContainer = document.body;
  const currentGroupId = `dropdown-${groupCounter}`;
  groupCounter++;
  
  // Create new dropdown with group ID
  const newDropdown = document.createElement('select');
  newDropdown.className = 'dynamic-dropdown';
  newDropdown.setAttribute('data-group', currentGroupId);
  newDropdown.innerHTML = `
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="other">Other</option>
  `;
  
  // Create paired input with matching group ID
  const newInput = document.createElement('input');
  newInput.type = 'text';
  newInput.className = 'other-input';
  newInput.setAttribute('data-group', currentGroupId);
  newInput.placeholder = 'Enter custom value';
  newInput.style.display = 'none';
  
  // Add elements to your desired containers (example wrappers)
  const dropdownWrap = document.createElement('div');
  dropdownWrap.className = 'some-container';
  dropdownWrap.appendChild(newDropdown);
  
  const inputWrap = document.createElement('div');
  inputWrap.className = 'another-container';
  inputWrap.appendChild(newInput);
  
  parentContainer.appendChild(dropdownWrap);
  parentContainer.appendChild(inputWrap);
});

Both solutions eliminate the need for unique parent containers. The first is ideal for simple, linear DOM structures, while the second gives you flexibility if your elements need to live in separate parts of the page. Either way, dynamic additions are trivial to implement!

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