技术咨询：实现多Dropdown与TextBox内容拼接至指定TextBox的方案

Got it, let's build that custom concatenation tool you're asking for—with 3-5 dropdowns, up to 2 text inputs, a Generate button, and support for custom output formatting. I'll use vanilla HTML/CSS/JS since it's framework-agnostic and easy to adapt to your stack.

First, we'll lay out all components with unique IDs so we can target them in JavaScript. I'll use 3 dropdowns and 2 text boxes as an example, but you can add up to 2 more dropdowns easily.

<div class="concatenator-container">
  <!-- Dropdowns (3 as base, add 2 more if needed) -->
  <div class="input-group">
    <label for="dropdown1">Tech Domain:</label>
    <select id="dropdown1">
      <option value="">Select an option</option>
      <option value="Frontend">Frontend</option>
      <option value="Backend">Backend</option>
      <option value="DevOps">DevOps</option>
    </select>
  </div>

  <div class="input-group">
    <label for="dropdown2">Programming Language:</label>
    <select id="dropdown2">
      <option value="">Select an option</option>
      <option value="JavaScript">JavaScript</option>
      <option value="Python">Python</option>
      <option value="Java">Java</option>
    </select>
  </div>

  <div class="input-group">
    <label for="dropdown3">Framework/Tool:</label>
    <select id="dropdown3">
      <option value="">Select an option</option>
      <option value="React">React</option>
      <option value="Django">Django</option>
      <option value="Docker">Docker</option>
    </select>
  </div>

  <!-- Text Inputs (2 max) -->
  <div class="input-group">
    <label for="text1">Custom Version:</label>
    <input type="text" id="text1" placeholder="e.g., v2.1.0">
  </div>

  <div class="input-group">
    <label for="text2">Project Tag:</label>
    <input type="text" id="text2" placeholder="e.g., Production Ready">
  </div>

  <!-- Generate Button & Output Box -->
  <button id="generateBtn">Generate</button>

  <div class="output-group">
    <label for="output">Final Result:</label>
    <textarea id="output" readonly rows="3"></textarea>
  </div>
</div>

Add simple styling to make the interface organized and easy to use:

.concatenator-container {
  max-width: 650px;
  margin: 30px auto;
  padding: 25px;
  font-family: 'Arial', sans-serif;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.input-group {
  margin-bottom: 18px;
}

label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #333;
}

select, input, textarea {
  width: 100%;
  padding: 9px;
  box-sizing: border-box;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

#generateBtn {
  background-color: #2563eb;
  color: white;
  padding: 10px 22px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 15px;
  margin-bottom: 20px;
}

#generateBtn:hover {
  background-color: #1d4ed8;
}

.output-group {
  margin-top: 25px;
}

#output {
  resize: vertical;
  background-color: #f9fafb;
}

This is the core part where we collect values, apply your custom format, and output the result. The best part? You can tweak the concatTemplate string to match any output style you want.

// Grab all UI elements
const dropdown1 = document.getElementById('dropdown1');
const dropdown2 = document.getElementById('dropdown2');
const dropdown3 = document.getElementById('dropdown3');
const text1 = document.getElementById('text1');
const text2 = document.getElementById('text2');
const generateBtn = document.getElementById('generateBtn');
const output = document.getElementById('output');

// Define your custom concatenation template here
// Use ${variableName} to insert values from dropdowns/text inputs
const concatTemplate = "Tech Stack: ${dropdown1} > ${dropdown2} > ${dropdown3} | Version: ${text1} | Tag: ${text2}";

// Function to build the concatenated string
function generateResult() {
  // Collect all values (trim whitespace to avoid empty clutter)
  const inputValues = {
    dropdown1: dropdown1.value.trim(),
    dropdown2: dropdown2.value.trim(),
    dropdown3: dropdown3.value.trim(),
    text1: text1.value.trim(),
    text2: text2.value.trim()
  };

  // Replace placeholders in the template with actual values
  let finalResult = concatTemplate;
  for (const [key, value] of Object.entries(inputValues)) {
    if (value) {
      // Replace placeholder with non-empty value
      finalResult = finalResult.replace(`\${${key}}`, value);
    } else {
      // Optional: Remove sections with empty values to clean up output
      finalResult = finalResult.replace(` | ${key.split('')[0].toUpperCase()}${key.slice(1)}: \${${key}}`, "");
    }
  }

  // Clean up any leftover extra separators
  finalResult = finalResult.replace(/>\s+>/g, ">").trim();
  finalResult = finalResult.replace(/\|\s+\|/g, "|").trim();

  // Send the result to the output textarea
  output.value = finalResult;
}

// Attach click event to the Generate button
generateBtn.addEventListener('click', generateResult);

Quick Customization Tips: #

• Add More Dropdowns: Copy the dropdown HTML block, add a new entry to the inputValues object, and update the concatTemplate to include the new placeholder.
• Change Formatting: Modify the concatTemplate to use any separators (e.g., commas, slashes) or structure (e.g., a bullet-point list if you output to a div instead of textarea).
• Adjust Empty Value Handling: Instead of removing empty sections, you can replace empty values with "N/A" by changing the else clause to finalResult = finalResult.replace(${${key}}, "N/A");.

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