依赖于另一个字段的select2字段

<!-- 引入select2的库文件和样式表 -->
<link rel="stylesheet" href="select2.css">
<script src="select2.js"></script>

<!-- 定义依赖字段和select2字段 -->
<select id="dependencyField">
  <option value="option1">Option 1</option>
  <option value="option2">Option 2</option>
</select>

<select id="select2Field">
  <option value=""></option>
</select>

<script>
  // 监听依赖字段的变化事件
  document.getElementById("dependencyField").addEventListener("change", function() {
    // 获取依赖字段的值
    var dependencyValue = this.value;
    
    // 发送请求获取相应的选项数据
    // 这里可以使用Ajax请求后端接口获取数据，具体实现方式根据项目需求而定
    
    // 假设获取到的选项数据为options
    var options = [
      { id: "option1", text: "Option 1" },
      { id: "option2", text: "Option 2" },
      { id: "option3", text: "Option 3" }
    ];
    
    // 清空select2字段的选项
    var select2Field = document.getElementById("select2Field");
    select2Field.innerHTML = "";
    
    // 动态加载选项到select2字段
    options.forEach(function(option) {
      var optionElement = document.createElement("option");
      optionElement.value = option.id;
      optionElement.text = option.text;
      select2Field.appendChild(optionElement);
    });
    
    // 初始化select2字段
    $(select2Field).select2();
  });
</script>