根据下拉选择(Javascript / HTML)动态填充单个字段

Question

我试图通过使用多个下拉框来获取零件代码生成器，这些下拉框在每个下拉框中有多个选择。我喜欢将结果返回到一个字段中。

下面的代码将每个下拉框生成到其输入字段中，但我希望它合并信息并在选择每个下拉框时构建它。

<script type="text/javascript">
// Pre populated array of data
var myData = new Array();
myData[1] = 'JUN LED39 W';
myData[2] = 'JUNO LED76 W';
myData[3] = 'P';
myData[4] = 'O';
myData[5] = '3K DALI';
myData[6] = '4K DALI';
myData[7] = '';
myData[8] = 'E3';
</script>
<form id="example" name="example">
<select id="lumen" name="lumen">
<option value="" selected>lumen</option>
<option value=1>3888lm</option>
<option value=2>7666lm</option>
</select>
<select id="diffuser" name="Diffuser">
<option value="" selected>diffuser</option>
<option value=3>Prismatic</option>
<option value=4>Opal</option>
</select>
</select>
<select id="cct" name="cct">
<option value="" selected>cct</option>
<option value=5>3000k</option>
<option value=6>4000k</option>
</select>
<select id="em3" name="em3">
<option value="" selected>emergency</option>
<option value=7>No</option>
<option value=8>Yes</option>
</select>
<br />
<input type="text" value="" id="answer1" name="answer1" />
<input type="text" value="" id="answer2" name="answer2" />
<input type="text" value="" id="answer3" name="answer3" />
<input type="text" value="" id="answer4" name="answer4" />
</form>
<script type="text/javascript">
document.example.lumen.onchange = updateText;
document.example.diffuser.onchange = updateText;
document.example.cct.onchange = updateText;
document.example.em3.onchange = updateText;
function updateText() {
var obj_sel = document.example.lumen;
document.example.answer1.value = myData[obj_sel.value];
var obj_sel = document.example.diffuser;
document.example.answer2.value = myData[obj_sel.value];
var obj_sel = document.example.cct;
document.example.answer3.value = myData[obj_sel.value];
var obj_sel = document.example.em3;
document.example.answer4.value = myData[obj_sel.value];
}
</script>

Answer 1

您可以将输入字段的显示值设置为"none"，并在填充时更改此值。

document.example.lumen.onchange = updateText;
document.example.diffuser.onchange = updateText;
document.example.cct.onchange = updateText;
document.example.em3.onchange = updateText;
function updateText() {
var obj_sel = document.example.lumen;
var lumen = myData[obj_sel.value] || '';

var obj_sel = document.example.diffuser;
var diffuser = myData[obj_sel.value] || '';

var obj_sel = document.example.cct;
var cct = myData[obj_sel.value] || '';

var obj_sel = document.example.em3;
var em3 = myData[obj_sel.value] || '';

document.example.answer.value = `${lumen}    ${diffuser}    ${cct}    ${em3}`;
}

<script type="text/javascript">
// Pre populated array of data
var myData = new Array();
myData[1] = 'JUN LED39 W';
myData[2] = 'JUNO LED76 W';
myData[3] = 'P';
myData[4] = 'O';
myData[5] = '3K DALI';
myData[6] = '4K DALI';
myData[7] = '';
myData[8] = 'E3';
</script>
<form id="example" name="example">
<select id="lumen" name="lumen">
<option value="" selected>lumen</option>
<option value=1>3888lm</option>
<option value=2>7666lm</option>
</select>
<select id="diffuser" name="Diffuser">
<option value="" selected>diffuser</option>
<option value=3>Prismatic</option>
<option value=4>Opal</option>
</select>
<select id="cct" name="cct">
<option value="" selected>cct</option>
<option value=5>3000k</option>
<option value=6>4000k</option>
</select>
<select id="em3" name="em3">
<option value="" selected>emergency</option>
<option value=7>No</option>
<option value=8>Yes</option>
</select>
<br />
<input type="text" value="" id="answer" name="answer" style="width: 100%" />
</form>