jquery ajax 三级 下拉菜单

以下是一个简单的 jQuery AJAX 三级下拉菜单的示例：

HTML代码：

<select id="first-dropdown">
  <option value="">请选择</option>
</select>

<select id="second-dropdown">
  <option value="">请选择</option>
</select>

<select id="third-dropdown">
  <option value="">请选择</option>
</select>

JavaScript代码：

$(document).ready(function() {
  $('#first-dropdown').on('change', function() {
    var firstDropdownValue = $(this).val();
    if (firstDropdownValue) {
      $.ajax({
        type: 'GET',
        url: '/api/second-dropdown/' + firstDropdownValue,
        success: function(data) {
          $('#second-dropdown').empty().append('<option value="">请选择</option>');
          $.each(data, function(index, element) {
            $('#second-dropdown').append('<option value="' + element.value + '">' + element.text + '</option>');
          });
        }
      });
    } else {
      $('#second-dropdown').empty().append('<option value="">请选择</option>');
      $('#third-dropdown').empty().append('<option value="">请选择</option>');
    }
  });

  $('#second-dropdown').on('change', function() {
    var secondDropdownValue = $(this).val();
    if (secondDropdownValue) {
      $.ajax({
        type: 'GET',
        url: '/api/third-dropdown/' + secondDropdownValue,
        success: function(data) {
          $('#third-dropdown').empty().append('<option value="">请选择</option>');
          $.each(data, function(index, element) {
            $('#third-dropdown').append('<option value="' + element.value + '">' + element.text + '</option>');
          });
        }
      });
    } else {
      $('#third-dropdown').empty().append('<option value="">请选择</option>');
    }
  });
});

其中，`#first-dropdown`、`#second-dropdown` 和 `#third-dropdown` 分别代表三个下拉菜单，当第一个下拉菜单的值改变时，会向后台发送 AJAX 请求获取第二个下拉菜单的选项，当第二个下拉菜单的值改变时，会向后台发送 AJAX 请求获取第三个下拉菜单的选项。具体的 AJAX 请求 URL 和返回数据格式需要根据实际情况进行修改。