<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two Selects to Multiple Inputs</title>
<script>
window.onload = function() {
var select1 = document.getElementById('mySelect1');
var select2 = document.getElementById('mySelect2');
var inputs1 = document.querySelectorAll('#selectGroup1 input[type="text"]');
var inputs2 = document.querySelectorAll('#selectGroup2 input[type="text"]');
// 为第一个select添加事件监听器
select1.addEventListener('change', function() {
fillInputs(this.value, inputs1);
});
// 为第二个select添加事件监听器
select2.addEventListener('change', function() {
fillInputs(this.value, inputs2);
});
// 填充inputs的函数
function fillInputs(value, inputs) {
var valuesArray = value.split('｜'); // 拆分value为数组
valuesArray.forEach(function(val, index) {
if (index < inputs.length) {
inputs[index].value = val; // 填充到对应的input中
}
});
}
};
</script>
</head>
<body>
<form>
<div id="selectGroup1">
<label for="mySelect1">常用发件人：</label>
<select id="mySelect1">
<option value="">↓请选择你的常用发件人信息↓</option>
<option value="张三｜北京市海淀区朝阳路111号｜18616712339">张三｜北京市海淀区朝阳路111号｜18616712339</option>
<option value="李四｜上海市松江区民主路222号｜15288771122">李四｜上海市松江区民主路222号｜15288771122</option>
<!-- 可以继续添加更多选项 -->
</select>
<br>
<label>发件人：</label>
<input type="text" readonly>
<br>
<label>发件地址：</label>
<input type="text" readonly>
<br>
<label>发件电话：</label>
<input type="text" readonly>
</div>
<br>
<div id="selectGroup2">
<label for="mySelect2">常用收件人信息：</label>
<select id="mySelect2">
<option value="">↓请选择你的常用收件人信息↓</option>
<option value="jack｜1 Infinite Loop Cupertino CA 95014｜558899711">jack｜1 Infinite Loop Cupertino CA 95014｜558899711</option>
<option value="mark｜1101 S Main St APT 203 Milpitas CA 95035｜7788993311">mark｜1101 S Main St APT 203 Milpitas CA 95035｜7788993311</option>
<!-- 可以继续添加更多选项 -->
</select>
<br>
<label>收件人：</label>
<input type="text" readonly>
<br>
<label>收件地址：</label>
<input type="text" readonly>
<br>
<label>收件电话：</label>
<input type="text" readonly>
</div>
</form>
</body>
</html>
沪公网安备31011702006630号
