如何用jQuery组合两个mvc下拉列表？

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<select id="list1" class="dropdown"></select>
<select id="list2" class="dropdown"></select>

$.ajax({
  url: 'data.php', // 替换为服务器端数据接口的URL
  method: 'GET',
  dataType: 'json',
  success: function(data) {
    var list1 = $('#list1');
    $.each(data, function(index, item) {
      list1.append($('<option>', {
        value: item.value,
        text: item.text
      }));
    });
  },
  error: function() {
    console.log('请求数据失败');
  }
});

[
  {"value": "1", "text": "选项1"},
  {"value": "2", "text": "选项2"},
  {"value": "3", "text": "选项3"}
]

$('#list1').change(function() {
  var selectedValue = $(this).val();
  var list2 = $('#list2');
  list2.empty(); // 清空第二个下拉列表的选项
  if (selectedValue === '') {
    list2.prop('disabled', true); // 如果第一个下拉列表未选择任何选项，则禁用第二个下拉列表
  } else {
    list2.prop('disabled', false); // 否则启用第二个下拉列表
    // 根据选中的值向服务器请求第二个下拉列表的选项数据，并填充到第二个下拉列表中
    $.ajax({
      url: 'data.php?selectedValue=' + selectedValue, // 替换为服务器端数据接口的URL，同时传递选中的值作为参数
      method: 'GET',
      dataType: 'json',
      success: function(data) {
        $.each(data, function(index, item) {
          list2.append($('<option>', {
            value: item.value,
            text: item.text
          }));
        });
      },
      error: function() {
        console.log('请求数据失败');
      }
    });
  }
});