如何为不同的select选项值设置不同的位置

<select>
  <option class="option1">Option 1</option>
  <option class="option2">Option 2</option>
  <option class="option3">Option 3</option>
</select>

<style>
  .option1 {
    /* 设置Option 1的位置样式 */
  }
  
  .option2 {
    /* 设置Option 2的位置样式 */
  }
  
  .option3 {
    /* 设置Option 3的位置样式 */
  }
</style>

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

<script>
  var select = document.getElementById("mySelect");
  
  select.addEventListener("change", function() {
    var selectedValue = select.value;
    
    if (selectedValue === "option1") {
      // 设置Option 1的位置样式
    } else if (selectedValue === "option2") {
      // 设置Option 2的位置样式
    } else if (selectedValue === "option3") {
      // 设置Option 3的位置样式
    }
  });
</script>

<div id="selectContainer"></div>

<script>
  var selectContainer = document.getElementById("selectContainer");
  
  var select = document.createElement("select");
  
  var option1 = document.createElement("option");
  option1.text = "Option 1";
  option1.value = "option1";
  // 设置Option 1的位置样式
  
  var option2 = document.createElement("option");
  option2.text = "Option 2";
  option2.value = "option2";
  // 设置Option 2的位置样式
  
  var option3 = document.createElement("option");
  option3.text = "Option 3";
  option3.value = "option3";
  // 设置Option 3的位置样式
  
  select.add(option1);
  select.add(option2);
  select.add(option3);
  
  selectContainer.appendChild(select);
</script>