如何在下拉列表html中选择值时使文本字段成为只读

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

document.getElementById("myDropdown").addEventListener("change", function() {
  var selectedOption = this.options[this.selectedIndex];
  var textField = document.getElementById("myTextField");

  if (selectedOption.value !== "") {
    textField.value = selectedOption.text;
    textField.readOnly = true;
  } else {
    textField.value = "";
    textField.readOnly = false;
  }
});

<input type="text" id="myTextField">