如何根据另一个dropdownlist的选定值填充dropdownlist？MVC

<!-- 前端页面 -->
<select id="mainDDL">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select id="subDDL"></select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function() {
    $('#mainDDL').change(function() {
      var selectedValue = $(this).val();
      
      $.ajax({
        url: '/Controller/Action', // 后端处理请求的URL
        type: 'POST',
        data: { selectedValue: selectedValue },
        success: function(data) {
          // 根据返回的数据生成从属DDL的选项
          $('#subDDL').empty();
          $.each(data, function(index, item) {
            $('#subDDL').append($('<option>').text(item.text).val(item.value));
          });
        }
      });
    });
  });
</script>

// 后端控制器
public class Controller : Controller
{
  [HttpPost]
  public ActionResult Action(string selectedValue)
  {
    // 根据主DDL的选定值进行相应的处理，例如查询数据库
    var data = GetSubDDLData(selectedValue);
    
    // 返回处理结果
    return Json(data);
  }
  
  private List<SelectListItem> GetSubDDLData(string selectedValue)
  {
    // 根据主DDL的选定值查询数据库或进行其他处理，获取从属DDL的数据
    // 返回一个包含从属DDL选项的列表
    return new List<SelectListItem>
    {
      new SelectListItem { Text = "选项A", Value = "A" },
      new SelectListItem { Text = "选项B", Value = "B" },
      new SelectListItem { Text = "选项C", Value = "C" }
    };
  }
}