在 javascript 中使用查询选择器

Question

我有一个带有选择框的表单，当我选择一个选项时。我希望它显示输入和输入字段。我已经通过其中一个选择框上的更改事件侦听器很好地完成了此操作。我的问题是我有 4 个选择框和 4 个输入值，我想这样做。我知道我必须使用查询选择器 all 并使用 are forEach 循环，但据我所知。使用查询选择器 all 时，我应该让选择框中的所有 ID 都相同，还是从查询选择器 all 中获取所有选择框更容易？

我的选择框和输入都设置相同，除了不同的 ID 名称。

// codes for input boxes

let trimCode = '123456kj';

let chassisCode = 'ab123';

let finalCode = 'abcd1254';

let materialCode = 'mnb124578';

let qualityCode = 'abc123456';

let paintCode = 'zyf123';

let bodyCode = 'typ4598';

// event listener for one select box

currentDept.addEventListener('change', changeCode);

// changeCode function

function changeCode() {

  const x = currentDept.value;

  switch (x) {

    case "trim":

      classCode.value = trimCode;

      break;

    case "chassis":

      classCode.value = chassisCode;

      break;

    case "final":

      classCode.value = finalCode;

      break;

    case "material":

      classCode.value = materialCode;

      break;

    case "quality":

      classCode.value = qualityCode;

      break;

    case "paint":

      classCode.value = paintCode;

      break;

    case "body":

      classCode.value = bodyCode;

      break;

    default:

      console.log('something went wrong');

  }

}

<div class="form-control">

  <label for="current">Current Department</label>

  <select name="current" id="currentDept">

    <option value="trim" selected>Trim</option>

    <option value="chassis">Chassis</option>

    <option value="final">Final</option>

    <option value="material">Material</option>

    <option value="quality">Quality</option>

    <option value="paint">Paint</option>

    <option value="body">Body</option>

  </select>

  <small>Error Message</small>

</div>

<div class="form-control">

  <label for="classCode">Current Classification Code</label>

  <input type="text" id="classCode" placeholder="Enter Current Classification Code">

  <small>Error Message</small>

</div>

Answer 1

可能有一种更简单的方法可以做到这一点，但经过更多的研究和大量的试验和错误后，我发现这是可行的。所以基本上我需要的只是“this.value”for (var i = 0; i < selectBoxes.length; i++){&nbsp; &nbsp; selectBoxes[i].addEventListener('change', function(e) {&nbsp; &nbsp; &nbsp; &nbsp; // get the value of the select option list&nbsp; &nbsp; &nbsp; &nbsp; var optionValue = this.value;&nbsp; &nbsp; &nbsp; &nbsp; // console.log(optionValue);&nbsp; &nbsp; &nbsp; &nbsp; // get the index of the select box selected&nbsp; &nbsp; &nbsp; &nbsp; const x = [].indexOf.call(selectBoxes, e.target);&nbsp; &nbsp; &nbsp; &nbsp; // console.log(x);&nbsp; &nbsp; &nbsp; &nbsp; changeCode(optionValue, x);&nbsp; &nbsp; });}