如何用JavaScript将多个Select与Input的值拼接至最终输入框？

你可以通过以下方式实现多控件值的拼接显示：

1. 先写一个通用的更新函数，用来收集所有需要的控件值并拼接：

function updateResult() {
  // 获取第一个下拉框选中的data-id
  const valA = $('#chosen_a option:selected').data('id') || '';
  // 获取第一个输入框的值
  const valInput1 = $('#Something1').val() || '';
  // 获取第二个下拉框选中的data-id
  const valB = $('#chosen_b option:selected').data('id') || '';
  // 获取第二个输入框的值
  const valInput2 = $('#Something2').val() || '';
  
  // 拼接所有值，这里用空格分隔，你可以改成逗号、换行或者其他分隔符
  const combinedValue = [valA, valInput1, valB, valInput2].filter(Boolean).join(' ');
  
  // 把拼接后的值赋值给目标输入框
  $('#ddlNames').val(combinedValue);
}

2. 给所有需要触发更新的控件绑定事件，确保任何一个控件的值变化时都能更新结果：

// 下拉框用change事件
$('#chosen_a, #chosen_b').on('change', updateResult);
// 输入框用input事件（实时响应输入，包括粘贴等操作）
$('#Something1, #Something2').on('input', updateResult);

完整代码示例 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="criteria_title" id="chosen_a" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
  <option value="" disabled="" selected="">- First select -</option>
  <option value="AAA" data-id="AAA">AAA</option>
  <option value="BBB" data-id="BBB">BBB</option>
  <option value="CCC" data-id="CCC">CCC</option>
  <option value="DDD" data-id="DDD">DDD</option>
  <option value="EEE" data-id="EEE">EEE</option>
</select>

<input id="Something1" placeholder="Write something"></input><br/>

<select name="criteria_title" id="chosen_b" data-placeholder="Select Category" class="chzn_z span3 dropDownId chzn-done" style="display: block;">
  <option value="" disabled="" selected="">- Second select -</option>
  <option value="FFF" data-id="FFF">FFF</option>
  <option value="GGG" data-id="GGG">GGG</option>
  <option value="HHH" data-id="HHH">HHH</option>
  <option value="III" data-id="III">III</option>
  <option value="JJJ" data-id="JJJ">JJJ</option>
</select>

<input id="Something2" placeholder="Write something else"></input><br/>

<br><br>

<input maxlength="2600" name="ddlNames" id="ddlNames" onKeyUp="countChar(this)" placeholder="Blocco Note"></input><br/>

<script>
function updateResult() {
  const valA = $('#chosen_a option:selected').data('id') || '';
  const valInput1 = $('#Something1').val() || '';
  const valB = $('#chosen_b option:selected').data('id') || '';
  const valInput2 = $('#Something2').val() || '';
  
  const combinedValue = [valA, valInput1, valB, valInput2].filter(Boolean).join(' ');
  
  $('#ddlNames').val(combinedValue);
}

$('#chosen_a, #chosen_b').on('change', updateResult);
$('#Something1, #Something2').on('input', updateResult);
</script>

补充说明 #

• filter(Boolean) 用来过滤空值，避免出现多余的分隔符
• 分隔符默认用空格，你可以把join(' ')改成join(', ')（逗号加空格）、join('\n')（换行）等任意格式
• 输入框用input事件比keyup更全面，能响应粘贴、拖拽输入等操作

内容的提问来源于stack exchange，提问作者Valentina Furnò