如何使用ajax从另一个下拉列表中填充下拉列表

<select id="sourceList">
  <option value="1">选项1</option>
  <option value="2">选项2</option>
  <option value="3">选项3</option>
</select>

<select id="targetList">
  <option value="">请选择</option>
</select>

$(document).ready(function() {
  $('#sourceList').change(function() {
    var selectedValue = $(this).val();
    
    // 发送Ajax请求
    $.ajax({
      url: 'getData.php',  // 替换为你的后端接口地址
      type: 'GET',
      data: { selectedValue: selectedValue },
      dataType: 'json',
      success: function(response) {
        // 清空目标下拉列表
        $('#targetList').empty();
        
        // 填充目标下拉列表
        $.each(response, function(key, value) {
          $('#targetList').append('<option value="' + key + '">' + value + '</option>');
        });
      },
      error: function() {
        alert('请求失败，请重试！');
      }
    });
  });
});

<?php
$selectedValue = $_GET['selectedValue'];

// 根据选项值获取数据
$data = array();
if ($selectedValue == '1') {
  $data = array(
    '1' => '选项1-1',
    '2' => '选项1-2',
    '3' => '选项1-3'
  );
} elseif ($selectedValue == '2') {
  $data = array(
    '4' => '选项2-1',
    '5' => '选项2-2',
    '6' => '选项2-3'
  );
} elseif ($selectedValue == '3') {
  $data = array(
    '7' => '选项3-1',
    '8' => '选项3-2',
    '9' => '选项3-3'
  );
}

// 返回JSON格式的数据
header('Content-Type: application/json');
echo json_encode($data);
?>