如何通过复选框隐藏下拉字段

<input type="checkbox" id="hideDropdown">
<label for="hideDropdown">隐藏下拉字段</label>

<select id="dropdownField">
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <option value="option3">选项3</option>
</select>

var hideCheckbox = document.getElementById("hideDropdown");
var dropdownField = document.getElementById("dropdownField");

hideCheckbox.addEventListener("change", function() {
  if (hideCheckbox.checked) {
    dropdownField.style.display = "none";
  } else {
    dropdownField.style.display = "block";
  }
});

label {
  display: block;
  margin-bottom: 10px;
}

select {
  display: block;
  margin-bottom: 10px;
}

/* 隐藏下拉字段 */
#dropdownField {
  display: none;
}