如何控制多个选择添加和删除选项

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

<button onclick="addOption()">Add Option</button>
<button onclick="removeOption()">Remove Option</button>

<script>
function addOption() {
  var select = document.getElementById("mySelect");
  var option = document.createElement("option");
  option.text = "New Option";
  select.add(option);
}

function removeOption() {
  var select = document.getElementById("mySelect");
  select.remove(select.selectedIndex);
}
</script>

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

<button onclick="addOption()">Add Option</button>
<button onclick="removeOption()">Remove Option</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
function addOption() {
  $("#mySelect").append("<option value='newOption'>New Option</option>");
}

function removeOption() {
  $("#mySelect option:selected").remove();
}
</script>

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

<button onclick="toggleOption()">Toggle Option</button>

<script>
function toggleOption() {
  var option = document.getElementById("mySelect").options[1];
  option.classList.toggle("hidden");
}
</script>

<style>
.hidden {
  display: none;
}
</style>