如何让表单：：选择运行脚本来更改目标，以便每次选择不同的选项时样式都会更改？

<form>
  <label for="options">选择选项：</label>
  <select id="options" onchange="changeStyle()">
    <option value="option1">选项1</option>
    <option value="option2">选项2</option>
    <option value="option3">选项3</option>
  </select>
</form>

<div id="target">这是目标元素</div>

<style>
  .option1 {
    background-color: red;
    color: white;
  }

  .option2 {
    background-color: blue;
    color: white;
  }

  .option3 {
    background-color: green;
    color: white;
  }
</style>

<script>
  function changeStyle() {
    var selectBox = document.getElementById("options");
    var selectedOption = selectBox.options[selectBox.selectedIndex].value;
    var targetElement = document.getElementById("target");

    // 移除之前的样式类
    targetElement.classList.remove("option1", "option2", "option3");

    // 添加选中选项对应的样式类
    targetElement.classList.add(selectedOption);
  }
</script>