如何在jQuery select更改后加载多选？

<select id="mainSelect">
  <option value="">请选择</option>
  <option value="option1">选项1</option>
  <option value="option2">选项2</option>
  <!-- 更多选项 -->
</select>

<select id="multiSelect" multiple>
  <!-- 多选选项将在这里动态加载 -->
</select>

$(document).ready(function() {
  // 监听主select的change事件
  $('#mainSelect').change(function() {
    // 获取选中的值
    var selectedValue = $(this).val();
    
    // 根据选中的值动态加载多选选项
    if (selectedValue) {
      // 清空之前的多选选项
      $('#multiSelect').empty();
      
      // 假设我们有一个函数getMultiSelectOptions可以根据选中的值获取多选选项
      var options = getMultiSelectOptions(selectedValue);
      
      // 动态添加新的多选选项
      $.each(options, function(index, option) {
        $('#multiSelect').append($('<option>', {
          value: option.value,
          text: option.text
        }));
      });
    } else {
      // 如果主select没有选中任何值，则清空多选select
      $('#multiSelect').empty();
    }
  });
});

// 模拟一个根据选中值获取多选选项的函数
function getMultiSelectOptions(selectedValue) {
  // 这里应该是根据selectedValue从服务器获取数据的逻辑
  // 为了示例，我们使用静态数据
  var options = [];
  if (selectedValue === 'option1') {
    options = [
      { value: 'subOption1', text: '子选项1' },
      { value: 'subOption2', text: '子选项2' }
    ];
  } else if (selectedValue === 'option2') {
    options = [
      { value: 'subOption3', text: '子选项3' },
      { value: 'subOption4', text: '子选项4' }
    ];
  }
  return options;
}