如何操作两个选择字段并动态更改textContent

<select id="field1">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
  <option value="option3">Option 3</option>
</select>

<select id="field2">
  <option value="optionA">Option A</option>
  <option value="optionB">Option B</option>
  <option value="optionC">Option C</option>
</select>

var field1 = document.getElementById("field1");
var field2 = document.getElementById("field2");

field1.addEventListener("change", function() {
  var selectedOption1 = field1.value;
  var selectedOption2 = field2.value;
  
  // 动态更改textContent
  var targetElement = document.getElementById("targetElement");
  targetElement.textContent = "选择字段1选择了：" + selectedOption1 + "，选择字段2选择了：" + selectedOption2;
});

field2.addEventListener("change", function() {
  var selectedOption1 = field1.value;
  var selectedOption2 = field2.value;
  
  // 动态更改textContent
  var targetElement = document.getElementById("targetElement");
  targetElement.textContent = "选择字段1选择了：" + selectedOption1 + "，选择字段2选择了：" + selectedOption2;
});

<div id="targetElement"></div>