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

Question

我试图通过使用多个下拉框来获取零件代码生成器，每个下拉框都有多个选择。我想 return 将结果合并到一个字段中。

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

<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>

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

Dynamically populate a single field based on dropdown selections (Javascript / HTML)

javascript

html

arrays

dynamically-generated